Flutter布局总结（一）：单个widget

Flutter布局机制的核心是widget

---

首先了解下布局结构

此UI显示一个行包含3列，其中每列包含一个图标和一个标签

此UI的widget树图如下：

Container是一个widget，允许自定义其子widget。如果要添加填充、边距、边框或者是背景色，需要使用Container来设置

---

在Flutter中布局单个widget

1. 创建一个widget容纳可见对象。如创建一个Text widget：

   new Text('Hello World', style: new TextStyle(fontSize: 32.0))
   

2. 选择一个布局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列表）

3. 将布局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)),
         ),
       );
     }
   }

文章参考https://flutterchina.club/tutorials/layout/#approach