Flutter入门（二）--布局

* 网格布局

class HomeContent extends StatelessWidget {
  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value['imageUrl']),
            SizedBox(
              height: 10,
            ),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
        decoration: BoxDecoration(
            border: Border.all(
          color: Colors.yellow,
           1,
        )),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      crossAxisSpacing: 20.0, //水平子Widget之间间距
      mainAxisSpacing: 20.0, //垂直子Widget之间间距
      padding: EdgeInsets.all(10),
      crossAxisCount: 2, //一行的Widget数量
      // childAspectRatio: 0.7, //宽度和高度的比例
      children: this._getListData(),
    );
  }
}

效果图

优化

class HomeContent extends StatelessWidget {
  Widget _getListData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]['imageUrl']),
          SizedBox(
            height: 10,
          ),
          Text(
            listData[index]['title'],
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          ),
        ],
      ),
      decoration: BoxDecoration(
          border: Border.all(
        color: Colors.yellow,
         1,
      )),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10.0, //水平子Widget之间间距
        mainAxisSpacing: 10.0, //垂直子Widget之间间距
        crossAxisCount: 2, //一行的Widget数量
      ),
      itemCount: listData.length,
      itemBuilder: this._getListData,
    );
  }
}

* Padding(个人感觉和Container很像)（下面的代码很难看，重要的是思路）

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

效果图

* Row横向排序（Column同理）

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400.0,
       300.0,
      color: Colors.yellow,
      padding: EdgeInsets.all(10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          IconContainer(Icons.home, color: Colors.blue),
          IconContainer(Icons.search, color: Colors.red),
          IconContainer(Icons.select_all, color: Colors.orange)
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  double size;
  Color color;
  IconData icon;
  IconContainer(this.icon, {this.color = Colors.red, this.size = 30.0});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 80.0,
       80.0,
      color: this.color,
      child: Center(
        child: Icon(
          this.icon,
          size: this.size,
          color: Colors.white,
        ),
      ),
    );
  }
}

效果图

* 复杂布局

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

效果图

* Stack+Align

Stack(类似android的relativelayout)

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
         300,
        color: Colors.red,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              child: Icon(Icons.home, size: 40, color: Colors.white),
            ),
            Align(
              alignment: Alignment.center,
              child: Icon(Icons.search, size: 30, color: Colors.white),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.settings_applications,
                  size: 60, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

效果图

* Stack+Positioned

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
         300,
        color: Colors.red,
        child: Stack(
          children: <Widget>[
            Positioned(
              left: 10, //距离左边10
              child: Icon(Icons.home, size: 40, color: Colors.white),
            ),
            Positioned(
              bottom: 0, //距离左边0
              left: 100, //距离左边100
              child: Icon(Icons.search, size: 30, color: Colors.white),
            ),
            Positioned(
              right: 0, //距离右边0
              child: Icon(Icons.settings_applications,
                  size: 60, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

效果图

* AspectRatio宽高比组件

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 3.0 / 1.0, //宽高比
      child: Container(
        color: Colors.red,
      ),
    );
  }
}

效果图

* 卡片

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text(
                  '张三',
                  style: TextStyle(fontSize: 28),
                ),
                subtitle: Text('高级工程师'),
              ),
              ListTile(
                title: Text("电话：xxxxx"),
              ),
              ListTile(
                title: Text("地址：xxx"),
              )
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text(
                  '王五',
                  style: TextStyle(fontSize: 28),
                ),
                subtitle: Text('高级工程师'),
              ),
              ListTile(
                title: Text("电话：xxxxx"),
              ),
              ListTile(
                title: Text("地址：xxx"),
              )
            ],
          ),
        ),
      ],
    );
  }
}

效果图

* 图文卡片

listData.dart

List listData = [
  {
    "title": 'zhangsan',
    "author": 'alibaba',
    "imageUrl": 'https://www.itying.com/images/flutter/1.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'lisi',
    "author": 'huawei',
    "imageUrl": 'https://www.itying.com/images/flutter/2.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'wangwu',
    "author": 'wangyi',
    "imageUrl": 'https://www.itying.com/images/flutter/3.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'zhaoliu',
    "author": 'jinritoutiao',
    "imageUrl": 'https://www.itying.com/images/flutter/4.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'qixi',
    "author": 'dajiang',
    "imageUrl": 'https://www.itying.com/images/flutter/5.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'batiao',
    "author": 'tengxun',
    "imageUrl": 'https://www.itying.com/images/flutter/6.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'jiubing',
    "author": 'weixin',
    "imageUrl": 'https://www.itying.com/images/flutter/7.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demo')),
        body: HomeContent(),
      ),
      theme: ThemeData(primaryColor: Colors.blue),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: listData.map((value) {
        return Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 20 / 9,
                child: Image.network(value["imageUrl"], fit: BoxFit.cover),
              ),
              ListTile(
                leading: CircleAvatar(
                    //头像组件
                    backgroundImage: NetworkImage(value["imageUrl"])),
                title: Text(value["title"]),
                subtitle: Text(
                  value["discription"],
                  overflow: TextOverflow.ellipsis,
                ),
              )
            ],
          ),
        );
      }).toList(),
    );
  }

效果图很好看

* Wrap 流布局

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      // direction: Axis.vertical,//竖直排列
      alignment: WrapAlignment.start,
      children: <Widget>[
        MyButton("斗罗大陆"),
        MyButton("遮天"),
        MyButton("盗墓笔记"),
        MyButton("天龙八部"),
        MyButton("凡人修仙传"),
        MyButton("大主宰"),
        MyButton("仙逆"),
        MyButton("斗鱼"),
        MyButton("校花的贴身高手"),
        MyButton("酒神"),
        MyButton("最好的我们"),
      ],
    );
  }
}

class MyButton extends StatelessWidget {
  final String text;
  MyButton(this.text);
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).accentColor,
      onPressed: () {},
    );
  }
}

效果图

欢迎关注我的微信公众号：安卓圈