Flutter的布局方法

1、在flutter中Container类似于html中的div或者android中的layout布局，是作为一个控件的容器存在的，如填充、背景色、边框、边距等属性只有Container或者Container的子widget才用。

     在Container中添加Row或者Column可以以行或者列的方式处理布局方式。

2、使用Expanded来包围widget配合flex属性可以实现控件按照权重布

3、布局方式Row和Column的对其方式使用mainAxisAlignment和crossAxisAlignment，分别代表主轴方向上的对齐方式和与主轴垂直的方向上的对齐方式。

4、 mainAxisSize使得容器widget中的字控件聚集在一起，而不会散开布局

5、边距和边框

 

          new Container(

                  //边框

                  decoration: new BoxDecoration(

                    border: new Border.all(width: 10.0, color: Colors.black38),

                    borderRadius:

                        const BorderRadius.all(const Radius.circular(8.0)),

                  ),

                                 //边距

                  margin: const EdgeInsets.all(4.0),

                  child: new Image.asset('images/pic1.jpg'),

                ),

 

6、GridView

   渲染网格数据的方式

// The images are saved with names pic1.jpg, pic2.jpg...pic30.jpg.

// The List.generate constructor allows an easy way to create

// a list when objects have a predictable naming pattern.

 

List<Container> _buildGridTileList(int count) {

 

  return new List<Container>.generate(

      count,

      (int index) =>

          new Container(child: new Image.asset('images/pic${index+1}.jpg')));}

 

Widget buildGrid() {

  return new GridView.extent(

      maxCrossAxisExtent: 150.0,

      padding: const EdgeInsets.all(4.0),

      mainAxisSpacing: 4.0,

      crossAxisSpacing: 4.0,

      children: _buildGridTileList(30));}

 

class _MyHomePageState extends State<MyHomePage> {

  @override

  Widget build(BuildContext context) {

    return new Scaffold(

      appBar: new AppBar(

        title: new Text(widget.title),

      ),

      body: new Center(

        child: buildGrid(),

      ),

    );

  }}

7、listView

渲染列表数据时使用

使用方法：

List<Widget> list = <Widget>[

  new ListTile(

    title: new Text('CineArts at the Empire',

        style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),

    subtitle: new Text('85 W Portal Ave'),

    leading: new Icon(

      Icons.theaters,

      color: Colors.blue[500],

    ),

  ),

  new ListTile(

    title: new Text('The Castro Theater',

        style: new TextStyle(fontWeight: FontWeight.w500, fontSize: 20.0)),

    subtitle: new Text('429 Castro St'),

    leading: new Icon(

      Icons.theaters,

      color: Colors.blue[500],

    ),

  ),

  // ...

  // See the rest of the column defined on GitHub:

  // https://raw.githubusercontent.com/flutter/website/master/_includes/code/layout/listview/main.dart];

 

class _MyHomePageState extends State<MyHomePage> {

  @override

  Widget build(BuildContext context) {

    return new Scaffold(

      // ...

      body: new Center(

        child: new ListView(

          children: list,

        ),

      ),

    );

  }}