Flutter常用布局集合

容器组件（Container）

容器组件（Container）是一个组合Widget，内部有绘制Widget、定位Widget和尺寸Widget，包含一个子Widget,自身具备如alignment、pading等基础属性，方便布局过程中摆放child。Container组件常用属性如下表：

属性名	类型	说明
key	Key	Container唯一表示符，用于查找更新
alignment	AlignmentGeometry	控制child的对齐方式，如果Container或Container父节点尺寸大于child的尺寸，这个属性设置晦气作用，有很多种对齐方式
padding	EdgeInsetsGeometry	Decoration的内部的空白区域，如果有child的话，child位于padding内部
color	Color	用来设置Container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果
decoration	Decoration	绘制在child后面的装饰，设置了Decoration的话，就不能设置color属性，否则会报错，此时应该在Decoration中进行颜色的设置
foregroundDecoration	Decoration	绘制在child前面的装饰
width	double	Container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局
height	double	Container的高度，设置为double.infinity可以强制在高度上撑满
constraints	BoxConstraints	添加到child上额外的约束条件
margin	EdgeInsetsGeometry	围绕在Decoration和child之外的空白区域，不属于内容区域
transform	Matrix4	设置Container的变换矩阵，类型为Matrix4
child	Widget	Container中的内容Widget
decoration	Decoration	背景样式，一般可定义为BoxDecoration，里边有color属性，设置背景颜色；border:边框样式，里边有Border.all()方法，可以添加color设置边框颜色

9.Flutter学习之Wrap组件

Wrap组件可以实现流布局，单行的Wrap跟Row表现几乎一样，单列的Wrap变现与Column一致，但是Row与Column都是单行单列的，Wrap不一样，mainAxis(主轴)上控件不足时，则向crossAxis(次轴)去扩展显示。

属性	说明
direction	主轴的方向，默认水平
alignment	主轴的对齐方式
spacing	主轴方向上的间距
textDirection	文本方向
verticalDirection	定义了children摆放顺序，默认是down
runAlignment	run的对齐方式。run可以理解为新的行或者列，如果水平方向布局，run可以理解为新的一行
runSpacing	run的间距 ,即竖直方向的间距

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Wrap"),
        ),
        body: HomeContent(),
      ),
    );
  }
}
 
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 400,
      height: 600,
      color: Colors.blue,
      child: Wrap(
        spacing: 10,
        runSpacing: 10,
        verticalDirection: VerticalDirection.up,
        alignment: WrapAlignment.center,
        runAlignment: WrapAlignment.end,
        children: <Widget>[
          MyButton("鬼堡"),
          MyButton("天龙八部"),
          MyButton("超级兵王"),
          MyButton("金刚不死诀"),
          MyButton("西游记精选孙悟空"),
          MyButton("爱你是最好的时光"),
          MyButton("爱情的开关"),
        ],
      ),
    );
  }
}
 
class MyButton extends StatelessWidget {
  final String text;
 
  const MyButton(this.text, {Key key});
 
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        print('你点击了:$text');
      },
      textColor: Theme.of(context).accentColor,
      child: Text(this.text),
    );
  }
}

Flutter之Card组件

Card组件是卡片组件，内容可以由列表的widget组成，Card组件具有阴影圆角的功能。

常用属性：

属性	说明
margin	外边距
elevation	阴影值的深度
child	子元素

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Card"),
        ),
        body: HomeContent(),
      ),
    );
  }
}
 
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          elevation:1.0,
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              Container(
                child: Image.network(
                  "http://file03.16sucai.com/2016/06/20165rd2yvmc025.jpg",
                  fit: BoxFit.cover,