Flutter 布局 小试牛刀

第 01 节：垂直布局 Column 组件

Column 组件即垂直布局控件，能够将子组件垂直排列。其实你学会了 Row 组件就基本掌握了 Column 组件，里边的大部分属性都一样，我们还是以文字为例子，来看看 Column 布局。

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'ListView widget',
  home:Scaffold(
          appBar:new AppBar(
            title:new Text('垂直方向布局'),
  ),
  body:Column(
            mainAxisAlignment: MainAxisAlignment.center,
  children: [
              Center(child:Text('I am JSPang')),
  Center(child:Text('my website is jspang.com')),
  Center(child:Text('I love coding'))
            ],
  )
      ),
  );
  }
}
​

第 02 节：水平布局 Row 的使用

Flutter 中的 row 控件就是水平控件，它可以让 Row 里边的子元素进行水平排列。

Row 控件可以分为灵活排列和非灵活排列两种，这两种模式都需要熟练掌握，等经验丰富后可根据需求进行使用。

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    return MaterialApp(
      title:'ListView widget',
  home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向布局'),
  ),
  body:Row(
            children: [
              new RaisedButton(onPressed: (){},
  color: Colors.redAccent,
  child: new Text('red btn'),),
  Expanded(child: new RaisedButton(onPressed: (){},
  color: Colors.orange,
  child: new Text('orange btn'),),),
  Expanded(child: new RaisedButton(onPressed: (){},
  color: Colors.blue,
  child: new Text('blue btn'),),),

  ],
  )
      ),
  );
  }
}
​

第 03 节：Stack 层叠布局

水平布局和垂直布局确实很好用，但是有一种情况是无法完成的，比如放入一个图片，图片上再写一些字或者放入容器，这时候 Row 和 Column 就力不从心了。Flutter 为这种情况准备了 Stack 层叠布局，这节就主要学习一下。

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){

    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.8),
  children: [
        new CircleAvatar(
          backgroundImage: new NetworkImage('http://cc.cocimg.com/api/uploads/181218/4eb05d4922763aba6edaa2c666fdc459.jpg'),
  radius: 100.0,
  ),
  new Container(
          decoration: new BoxDecoration(
            color: Colors.lightBlue,
  ),
  padding: EdgeInsets.all(5.0),
  child: Text('test flutter'),
  )
      ],
  );

  return MaterialApp(
      title:'ListView widget',
  home:Scaffold(
          appBar:new AppBar(
            title:new Text('层叠布局'),
  ),
  body:Center(
             child: stack
          )
      ),
  );
  }
}
​

Positioned 组件的属性

• bottom: 距离层叠组件下边的距离
• left：距离层叠组件左边的距离
• top：距离层叠组件上边的距离
• right：距离层叠组件右边的距离
• width: 层叠定位组件的宽度
• height: 层叠定位组件的高度
  

第 04 节：卡片组件布局

Flutter 还有一种比较比较酷炫的布局方式，我称 它为卡片式布局。这种布局类似 ViewList，但是列表会以物理卡片的形态进行展示。

// 卡片布局
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){

    var card = new Card(
      child: Column(
        children: [
          ListTile(
            title: Text('杭州市西湖区',style: TextStyle(fontWeight: FontWeight.w500),),
  subtitle: Text('刘强东:12132435486587'),
  leading: new Icon(Icons.account_box,color: Colors.lightBlue),
  ),
  new Divider(),
  ListTile(
            title: Text('广东省广州市',style: TextStyle(fontWeight: FontWeight.w500),),
  subtitle: Text('马化腾:12132435486587'),
  leading: new Icon(Icons.account_box,color: Colors.lightBlue),
  ),
  new Divider(),
  ListTile(
            title: Text('上海市新城区',style: TextStyle(fontWeight: FontWeight.w500),),
  subtitle: Text('码云:12132547'),
  leading: new Icon(Icons.account_box,color: Colors.lightBlue),
  ),
  new Divider(),
  ],
  ),
  );
  return MaterialApp(
      title:'ListView widget',
  home:Scaffold(
          appBar:new AppBar(
            title:new Text('卡片布局'),
  ),
  body:card
      ),
  );
  }
}

​

如图所示:

DEMO 链接：https://github.com/hotdog45/flutter-practice.git