Flutter 常用 Widget 详解

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline textBaseline,
  List<Widget> children = const <Widget>[],
})
Column({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline textBaseline,
  List<Widget> children = const <Widget>[],
})

Row(
  children: <Widget>[
    Container( /// 此组件在主轴方向占据48.0逻辑像素
      width: 48.0
    ),
    Expanded(
      child: Container() /// 此组件会填满Row在主轴方向的剩余空间，撑开Row
    )
  ]
）

// 使用Expanded控件，将一行的宽度分成四个等分，第一、三个child占1/4的区域，第二个child占1/2区域，由flex属性控制。
class MyColumn extends StatelessWidget  {
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Expanded(
          child: new Container(
            color: Colors.red,
            padding: EdgeInsets.all(5.0),
          ),
          flex: 1,
        ),
        new Expanded(
          child: new Container(
            color: Colors.yellow,
            padding: EdgeInsets.all(5.0),
          ),
          flex: 2,
        ),
        new Expanded(
          child: new Container(
            color: Colors.blue,
            padding: EdgeInsets.all(5.0),
          ),
          flex: 1,
        )
      ],
    );
  }
}

Container(
  width: 100,
  height: 110,
  margin: EdgeInsets.fromLTRB(5, 5, 5, 30),
  padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
  child: Text("22")
  alignment: Alignment.center,
  transform: Matrix4.rotationZ(.2), //卡片倾斜变换
  decoration: BoxDecoration(
    color: Colors.white,
    gradient: RadialGradient( //背景径向渐变
        colors: [Colors.red, Colors.orange],
        center: Alignment.topLeft,
        radius: .98
    ),
    boxShadow: [ //卡片阴影
      BoxShadow(
          color: Colors.black54,
          offset: Offset(2.0, 2.0),
          blurRadius: 4.0
      )
    ],
    border: Border.all(color: Color(0xFFFF0000), width: 0.5), // 设置边框
    borderRadius: BorderRadius.circular((5.0)), // 设置圆角
    image: DecorationImage( // 设置背景图片
        image: AssetImage('images/blockBg/bg4.png'),
        fit: BoxFit.cover)),
)

const BoxConstraints({
  this.minWidth = 0.0, //最小宽度
  this.maxWidth = double.infinity, //最大宽度
  this.minHeight = 0.0, //最小高度
  this.maxHeight = double.infinity //最大高度
})

SizedBox((width: 80.0), (height: 80.0), (child: redBox));
// 实际上SizedBox只是ConstrainedBox的一个定制，上面代码等价于：
ConstrainedBox(
  constraints: BoxConstraints.tightFor(width: 80.0,height: 80.0),
  child: redBox,
)
// 也等价于：
BoxConstraints(minHeight: 80.0,maxHeight: 80.0,minWidth: 80.0,maxWidth: 80.0)

const FittedBox({
Key key,
this.fit: BoxFit.contain,
this.alignment: Alignment.center,
Widget child,
})

Container(
  color: Colors.blue,
  width: 100.0,
  height: 100.0,
  child: new Padding(
    padding: EdgeInsets.all(8.0),
    child: new Card(
      child: new Text('icepy'),
    ),
  ),
)

// The top left corner.
static const Alignment topLeft = const Alignment(-1.0, -1.0);

// 居右高于底部1/4处.
static const Alignment rightHalfBottom = alignment: const Alignment(1.0, 0.5),

Container(
  width: 200,
  height: 50,
  color: Colors.green,
  child: new Align(
    alignment: Alignment.center,
    child: new Text('icepy'),
  ),
)

Container(
  color: Colors.green,
  child: new Align(
    widthFactor: 2.0,
    heightFactor: 2.0,
    child: new Text('icepy'),
  ),
)

Stack({
  Key key,
  this.alignment = AlignmentDirectional.topStart,
  this.textDirection,
  this.fit = StackFit.loose,
  this.overflow = Overflow.clip,
  List<Widget> children = const <Widget>[],
})

// non-positioned
body: new Container(
  width: 200.0,
  height: 200.0,
  color: Colors.blue,
  child: new Stack(
    alignment: Alignment(0, 0),
    children: <Widget>[
      new Text(
        'icepy'
      ),
    ],
  ),
)
// positioned
body: new Container(
  width: 200.0,
  height: 200.0,
  color: Colors.blue,
  child: new Stack(
    children: <Widget>[
      new Positioned(
        top: 10.0,
        right: 10.0,
        child: new Text(
          'icepy'
        ),
      )
    ],
  ),
)

// 构造函数
IndexedStack({
    Key key,
    AlignmentGeometry alignment = AlignmentDirectional.topStart,
    TextDirection textDirection,
    StackFit sizing = StackFit.loose,
    this.index = 0,
    List<Widget> children = const <Widget>[],
  }) : super(key: key, alignment: alignment, textDirection: textDirection, fit: sizing, children: children);

// IndexedStack
body: new Container(
  width: 200.0,
  height: 200.0,
  color: Colors.blue,
  child: new IndexedStack(
    index: 1,
    children: <Widget>[
      new Container(
        width: 20.0,
        height: 20.0,
        color: Colors.grey,
      ),
      new Positioned(
        top: 10.0,
        right: 10.0,
        child: new Container(
          width: 50.0,
          height: 50.0,
          color: Colors.red,
        ),
      )
    ],
  ),
)

const OverflowBox({
    Key key,
    this.alignment = Alignment.center,
    this.minWidth,
    this.maxWidth,
    this.minHeight,
    this.maxHeight,
    Widget child,
  })

import 'package:flutter/material.dart';
class AVDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('AVAlertDialog'),
      ),
      body: Column(
        children:[
          new RaisedButton(
            child: new Text('click me'),
            color: Colors.green,
            onPressed: (){
              showDialog(
                context: context,
                child: new SimpleDialog( // 没有按钮
                  title: new Text('Hello icepy'),
                  children: <Widget>[
                    new Text('dialog children')
                  ],
                )
              );
            },
          ),
          new RaisedButton(
            child: new Text('click me'),
            color: Colors.green,
            onPressed: (){
              showDialog(
                context: context,
                child: new AlertDialog( // 带按钮
                  title: new Text('alert'),
                  actions: <Widget>[
                    new FlatButton(
                      child: new Text('确定'),
                      onPressed: (){
                        Navigator.pop(context);
                      },
                    )
                  ],
                )
              )
          }),
          new RaisedButton(
            child: new Text('click me'),
            color: Colors.green,
            onPressed: (){
              showDialog(
                context: context,
                child: new AboutDialog( // 不常用，只用于显示应用
                  applicationName: 'Flutter',
                  applicationVersion: 'v1.0.0',
                  applicationIcon: new Icon(
                    Icons.android,
                    color: Colors.green,
                  ),
                  children: <Widget>[
                    new Text(
                      '更新摘要 \n Update 1.0.0'
                    )
                  ],
                )
              )
        ]
      )
    );
  }
}

import 'package:flutter/material.dart';
class AVScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar( // AppBar
        title: new Text('Home'),
      ),
      body: new Center(
        child: new RaisedButton(
          child: new Text('click me'),
          color: Colors.blue,
          onPressed: () {
            Scaffold.of(context).showSnackBar(new SnackBar( // snack bars 的效果
              content: new Text('SnackBar'),
            ));
          }
        )
      ),
      drawer: new Drawer( // Drawers 布局框架
        child: new ListView(
          padding: const EdgeInsets.only(),
          children: <Widget>[
            new ListTile(
              title: new Text('Drawer'),
              onTap: () => {},
            )
          ],
        ),
      ),
      bottomSheet: new Container( // bottom sheets ，这个效果其实和前端里的 position: fixed 很类似
        child: new Row(
          children: <Widget>[
            new Expanded(
              child: new TextField(
                controller: textCV,
              ),
            ),
            new RaisedButton(
              child: new Text('发表'),
              onPressed: () {
                setState(() {
                  data.add(textCV.text);
                });
              },
            )
          ],
        ),
      ),
    );
  }
}