flutter从零开始使用（五）

FlatButton的使用

image.png

Container的用法

image.png

给他设置一个padding

image.png

多个控件横向排列

image.png

权重的用法

image.png

列的用法

image.png

所有代码：

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("标题"),
        centerTitle: true,
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Text("第一个元素"),
            flex: 3,

          ),
          Expanded(
            child: FlatButton(
                onPressed: () {
                  print("FlatButton被点击了");
                },
                color: Colors.red,
                child: Text("FlatButton")),
            flex: 1,
          ),
          Expanded(
            child: Container(
//        padding: EdgeInsets.all(60),//给他的四周都设置padding
              padding: EdgeInsets.fromLTRB(20, 20, 20, 20), //给他的左上右下设置padding
              child: Text("Hello world"),
              color: Colors.red[400],
            ),
            flex: 5,
          )
        ],
      ),
    );
  }
}