Flutter
布局机制的核心是widget
首先了解下布局结构
此UI显示一个行包含3列,其中每列包含一个图标和一个标签
此UI
的widget
树图如下:
Container
是一个widget
,允许自定义其子widget
。如果要添加填充、边距、边框或者是背景色,需要使用Container
来设置
在Flutter
中布局单个widget
创建一个
widget
容纳可见对象。如创建一个Text widget
:new Text('Hello World', style: new TextStyle(fontSize: 32.0))
选择一个布局
widget
,将可见widget
添加到布局widget
中。如将Text widget
添加到Center widget
中:new Center( child: new Text('Hello World', style: new TextStyle(fontSize: 32.0))
所有布局
widget
都有一个child
属性(如Center或Container),或者一个children
属性(如Row、Column、ListView或Stack,设置widget列表)将布局
widget
添加到页面
Flutter
应用本身是一个widget
,大部分widget
都有一个build()
方法。在应用程序的build()
中添加布局widget
如对于Material
应用程序,将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)), ), ); } }
对于非
Material
应用程序,将Center widget
添加到应用程序的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', style: new TextStyle(fontSize: 40.0, color: Colors.black87)), ), ); } }