1靠胜、所有的布局widget都有一個child屬性(例如Center或Container【要給widget添加內(nèi)邊距之類的用這個】),或者一個children屬性丧诺,如果他們需要一個widget列表(例如Row入桂、Column奄薇、ListView驳阎、或Stack)。
2馁蒂、Flutter應(yīng)用本身就是一個widget呵晚,大部分widget都有一個build()方法。在應(yīng)用程序的build方法中創(chuàng)建會在設(shè)備上顯示的widget沫屡。對于Material應(yīng)用程序饵隙,可以將Center widget直接添加到body屬性中
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Text('Hello World', style: new TextStyle(fontSize: 32.0)),
),
);
}
}
3、對于非Material應(yīng)用程序沮脖,您可以將Center widget 添加到應(yīng)用程序的build()方法中:
// 這個App沒有使用Material組件, 如Scaffold.
// 一般來說, app沒有使用Scaffold的話金矛,會有一個黑色的背景和一個默認為黑色的文本顏色芯急。
// 這個app,將背景色改為了白色驶俊,并且將文本顏色改為了黑色以模仿Material app
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(color: Colors.white),
child: new Center(
child: new Text('Hello World',
textDirection: TextDirection.ltr,
style: new TextStyle(fontSize: 40.0, color: Colors.black87)),
),
);
}
}
4娶耍、行和列是水平和垂直布局的基本、低級widget-這些低級widget允許最大化的自定義饼酿。Flutter還提供專門的榕酒,更高級的widget,可能足以滿足需求故俐。例如想鹰,ListTile替代Row,ListTile是一個易于使用的小部件药版,具有前后圖標屬性以及最多3行文本辑舷。可能更喜歡ListView而不是列槽片,ListView是一種列狀布局惩妇,如果其內(nèi)容太長而無法適應(yīng)可用空間,則會自動滾動筐乳。
5歌殃、對齊widgets
可以控制行和列如何使用 mainAxisAlignment 和 crossAxisAlignment 屬性來對齊其子項。對于行(Row)來說蝙云,主軸是水平方向氓皱,橫軸垂直方向。對于列(Column)來說勃刨,主軸垂直方向波材,橫軸水平方向。
MainAxisAlignment 和CrossAxisAlignment 類提供了很多控制對齊的常量.
6身隐、使用圖片需要注意
將圖片添加到項目時廷区,需要更新pubspec文件才能訪問它們
pubspec.yaml文件, 或在Flutter中添加資源和圖像贾铝。
如果使用的是網(wǎng)上的圖片隙轻,則不需要執(zhí)行此操作,使用Image.network
即可垢揩。
7玖绿、### 調(diào)整 widget
也許你想要一個widget占據(jù)其兄弟widget兩倍的空間。您可以將行或列的子項放置在Expandedwidget中叁巨, 以控制沿著主軸方向的widget大小斑匪。Expanded widget具有一個flex屬性,它是一個整數(shù)锋勺,用于確定widget的彈性系數(shù),默認彈性系數(shù)是1蚀瘸。
例如狡蝶,要創(chuàng)建一個由三個widget組成的行,其中中間widget的寬度是其他兩個widget的兩倍贮勃,將中間widget的彈性系數(shù)設(shè)置為2
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Expanded(
child: new Image.asset('images/pic1.jpg'),
),
new Expanded(
flex: 2,
child: new Image.asset('images/pic2.jpg'),
),
new Expanded(
聚集 widgets
默認情況下牢酵,行或列沿著其主軸會盡可能占用盡可能多的空間,但如果要將孩子緊密聚集在一起衙猪,可以將mainAxisSize設(shè)置為MainAxisSize.min馍乙。
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
var packedRow = new Row(
mainAxisSize: MainAxisSize.min,
children: [
new Icon(Icons.star, color: Colors.green[500]),
new Icon(Icons.star, color: Colors.green[500]),
new Icon(Icons.star, color: Colors.green[500]),
new Icon(Icons.star, color: Colors.black),
new Icon(Icons.star, color: Colors.black),
],
);
// ...
}