3.Flutter-初识布局Container

前言

Flutter布局基于前端FlexBox(盒子布局)原理，学过CSS布局的朋友应该很熟悉，本文是作者自我归纳文章，比较粗糙，如果想细致的学习，推荐去Flutter中文网-布局教程学习。

布局之Container

前面章节有说过Flutter万物皆为Widget(组件)，Container也是组件之一，并且可以算是万金油般的组件了，常用的属性有宽、高、背景色等，接下来我们来使用一下。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo',
      home: Scaffold(
        body: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        )
      ),
    );
  }
}

首先使用MaterialApp和Scaffold搭建起来一个页面基本的架子，然后在body里面返回了一个Container，并设置它的属性高、宽、颜色，来看看效果

可以看到Container是从左上开始布局的，接下来调整一下位置

Container(
          margin: EdgeInsets.only(top: 200, left: 200),
          width: 100,
          height: 100,
          color: Colors.red,
        )

使用margin(外边距)属性，并通过EdgeInsets.only方法分别对上边和左边移动200

这真的是和CSS布局一模一样呀，还可以使用EdgeInsets.all方法

Container(
          margin: EdgeInsets.all(200),
          width: 100,
          height: 100,
          color: Colors.red,
        )

不难发现all把四个边的边距都留出200的距离，所以导致Container被左右压缩了，而上下边距因为距离够，所以没有影响。

接下来把这个Container调大一点，并且在里面再放一个Container进行布局

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'demo',
      home: Scaffold(
        body: Container(
          margin: EdgeInsets.only(left: 100, top: 100),
          width: 200,
          height: 200,
          color: Colors.red,
          child: Container(
            margin: EdgeInsets.all(50),
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        )
      ),
    );
  }
}

由此可见，Container这个容器可以包裹任何Widget，并对其位置进行布局，如果某个Widget不支持布局属性，那么就可以用Container来包装一下即可，因此它的使用场景可谓是非常广的，这也体现出了Flutter中，万物皆为Widget的意思。
学习flutter布局，重点还是在于多多练习。

下期我们将介绍Flutter中3剑客(Row、Column、Stack)进行布局，分别针对横向、纵向、和重叠，期待你的阅读，蟹蟹

前言

布局之Container

嵌套Widget