页面布局 Paddiing Row Column Expanded 组件详解

一、Paddiing 组件

    padding    EdgeInsetss 设置填充的值

    child  组件 

 

return Padding(

    padding: EdgeInsets.fromLTRB(0, 0, 10, 0),

    child: GridView.count()

    )

 

二、 Row 水平布局组件

mainAxisAlignment   主轴的排序方式

crossAxisAlignment   次轴的排序方式

children  组件子元素 

 

三、 Column 垂直布局组件

mainAxisAlignment   主轴的排序方式

crossAxisAlignment  次轴的排序方式

children   组件子元素 

 

四、 Expanded 类似 Web 中的 Flex布局

 

Expanded 可以用在 Row 和 Column 布局中

flex  元素站整个父 Row /Column 的比例

child  子元素

 

案例

 案例代码

class HomenCenter extends StatelessWidget {
  Widget build(BuildContext context) {
    // TODO: implement build
    return Padding(
      padding: EdgeInsets.all(5),
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                child: Container(child: Text('你好啊', style: TextStyle(color: Colors.white),), height: 150, decoration: BoxDecoration(color: Colors.black),
                ),
              )
            ],
          ),
          SizedBox(height: 5,),
          Container(
            height: 150,
            child: Row(
              children: <Widget>[
                Expanded(flex: 2, child: Container(decoration: BoxDecoration(color: Colors.yellow))
                ),
                SizedBox(width: 5,),
                Expanded(
                    flex: 1,
                    child: Column(
                        children: <Widget>[
                          Expanded(flex: 1, child: Container(decoration: BoxDecoration(color: Colors.red),)),
                          SizedBox(height: 5,),
                          Expanded(flex: 1, child: Container(decoration: BoxDecoration(color: Colors.blue),))
                        ]
                    )
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}