Flutter布局

flutter布局

flutter部分分两种，一种是单个子控件的布局一种是多个子控件的布局

常用的单个子控件布局

• Align

里面可以包含一个子控件，这个布局可以控制子控件距离上下左右的距离。

主要属性：

const Align({
    Key key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child
  }) : assert(alignment != null),
       assert(widthFactor == null || widthFactor >= 0.0),
       assert(heightFactor == null || heightFactor >= 0.0),
       super(key: key, child: child);
复制代码

• Center

它继承于Align。也就是默认属性是this.alignment = Alignment.center,也就是这个控件总是在布局在的中间。

• Padding

官方举例

Padding(
  padding: EdgeInsets.all(8.0),
  child: const Card(child: Text('Hello World!')),
)
复制代码

主要使用属性：padding。设置子控件距离布局上下左右的距离。

我的应用：距离上下左右一定的距离

class FirstScreen extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Stone"),
      ),
      body: Padding(
        padding: EdgeInsets.only(
          left: 10.0, // 
          top: 20.0,
          right: 50.0,
          bottom: 10.0,
        ),
        child: RaisedButton(
            child: Text("点击我"),
            onPressed: () {
              /*Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondScreen()));*/
             //_navigateAndDisplaySelection(context);
              _neverSatisfied("石头",context: context);
            }
        )
    ),
    );
  }
复制代码

• Container

官方文档位置：docs.flutter.io/flutter/wid…

这个控件可是设置pading和magin。 我的应用：

class FirstScreen extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        title: Text("Stone"),
      ),
      body: Container(
        color: Colors.red,
        margin: EdgeInsets.only(left:10.0,
          top: 30.0,
          right: 50.0,
          bottom: 12.0),
        padding: EdgeInsets.only(left: 10.0),
        child: RaisedButton(
            child: Text("点击我"),
            onPressed: () {
              /*Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondScreen()));*/
             //_navigateAndDisplaySelection(context);
              _neverSatisfied("石头",context: context);
            }
        )
    ),
    );
  }
复制代码

常用的多个子控件布局

• Row

可以包裹多个控件，以行的形式排列

• Column

可以包裹多个控件，以列的形式排列

• Stack

包裹多个控件,后面的控件或者布局会覆盖前面的。 我的应用：

class FirstScreen extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(
        title: Text("Stone"),
      ),
      body: Stack(
        // 设置开始覆盖的位置,还有其他属性
        alignment: Alignment.center,
        children: <Widget>[
          FlatButton(

            child: Text("小菜鸟"),
            onPressed: null,
          ),

          //将覆盖上一个控件
          Text("我是小菜鸟"),
        ],
    ),
    );
  }
复制代码

最后总结

当然还有很多布局控件，也就举例这几个常用de吧。大家可以去官方网站查询的。

附上官方地址：

flutter.io/docs/develo…