Odstęp między widżetami
Część sekcji Twoja pierwsza aplikacja ścieżki Flutter w Coddy. Lekcja 21 z 32.
Elementy potomne elementu Column stykają się ze sobą. Aby dodać odstęp między dwoma z nich, umieść pusty element SizedBox na liście:
Column(
children: [
Text('Top'),
SizedBox(height: 20),
Text('Bottom'),
],
)Element SizedBox niczego nie rysuje. Zajmuje tylko miejsce: tutaj 20 pikseli wysokości. W elemencie Row użyj zamiast tego SizedBox(width: 20).
Wyzwanie
ŁatwyUmieść odstęp o wielkości 24 pikseli między Title a Subtitle.
Spróbuj swoich sił
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Title', style: TextStyle(fontSize: 32)),
Text('Subtitle'),
],
),
),
),
);
}
}
Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Twoja pierwsza aplikacja
2Stylizowanie tekstu
Rozmiar czcionkiPogrubienie i kursywaKolor tekstuKolory w systemie szesnastkowym5Wiersze i kolumny
KolumnaWierszOdstęp między widżetamiWyśrodkuj kolumnęWyrównaj lewe krawędzieWiersze wewnątrz kolumnPoćwicz samodzielnie: Kompilator Flutter online