Flutter从入门到跑路 ------Padding、Row、Column、Expanded（四）

Padding

padding 组件处理容器与子元素直接的间距

class PaddingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      childAspectRatio: 1.8,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
          child: Image.network('https://www.itying.com/images/flutter/1.png',
          fit: BoxFit.cover),
        ),
        ),
      ],
    );
  }
}

Row水平布局组件

属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

class RowDemos extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
   
    return Row(
      children: <Widget>[
        Expanded(child: 
              IconContainer(Icons.search,color: Colors.blue,size: 32.0),
              flex: 1,
        ),
        Expanded(child: 
              IconContainer(Icons.home,color: Colors.orange,size: 32.0),
              flex: 2,
        )
      ],
    );
  }
}

Column 垂直布局组件

属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State<HomePage> {

  int countNum = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Chip(
          label: Text('${this.countNum}'),
        ),
        RaisedButton(
          onPressed: (){
            setState(() {
              //只有有状态组件里面才有
              this.countNum++;
            });
          },
        child: Text('按钮'),
        )
      ],
    );
  }
}

Expanded

可以用在Row和Column布局中

属性	说明
flex	元素站父row/column的比例
child	子元素

class ExpandedDemos extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: 200,
          color: Colors.black,
          child: Text('你好'),
        ),
        Row(
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(
                height: 180,
                child: Image.network('https://www.itying.com/images/flutter/1.png'),
              )
            ),
            Expanded(
              flex: 1,
              child:ListView(
                children: <Widget>[
                  Container(
                    height: 90,
                    child:Image.network('https://www.itying.com/images/flutter/1.png'),
                  ),
                  Container(
                      height: 90,
                     child:Image.network('https://www.itying.com/images/flutter/2.png'),
                  )
                ],
              )
            )
          ],
        )
      ],
    );
  }
  
}