Flutter 学习笔记 （六）Card、AspectRatio、CircleAvatar 组件

Flutter 学习笔记 （一）安装及运行
Flutter 学习笔记 （二）Container组件、Text组件、图片组件
Flutter 学习笔记 （三）列表
Flutter 学习笔记 （四）Padding、Row、Column、Expanded组件
Flutter 学习笔记 （五）Stack & Align、Strack & Positioned 布局组件
Flutter 学习笔记 （六）Card、AspectRatio、CircleAvatar 组件
Flutter 学习笔记 （七）RaisedBotton、Wrap组件
Flutter 学习笔记 （八）StatefulWidget组件
Flutter 学习笔记（ 九）BottomNavigationBar 组件 底部导航
Flutter 学习笔记 （十）AppBar 定义 Tab 切换
Flutter 学习笔记 （十一） Drawer 侧边栏
Flutter 学习笔记 （十二）floatingActionButton 类似闲鱼按钮
Flutter 学习笔记 （十三）TextField、Checkbox、Radio 组件
Flutter 学习笔记 （十四）时间组件
Flutter 学习笔记 （十五）flutter_swiper 轮播组件
Flutter 学习笔记 （十六）Dialog 组件
Flutter 学习笔记 （十七）网络数据请求
Flutter 学习笔记 （十八）路由跳转

AspectRatio组件是用
来设置长宽比，可以在图片、容器等中使用
在插入图片是，通常需要加入fit: BoxFit.cover铺满图片

CircleAvatar组件是将图片裁切成圆形，不需要设置长宽

Card组件常与Column配合使用，注意要设置margin属性（与外界的距离）

class HomeContent extends StatelessWidget {

  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(aspectRatio: 17/9,child: Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover,),),
              ListTile(
                leading: CircleAvatar(backgroundImage: NetworkImage('https://www.itying.com/images/flutter/2.png',),),
                title: Text('xxxxx',style: TextStyle(fontSize: 20),),
                subtitle: Text('xxxxxxx'),
              ),
            ],
          ),  
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(aspectRatio: 17/9,child: Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover,),),
              ListTile(
                leading: CircleAvatar(backgroundImage: NetworkImage('https://www.itying.com/images/flutter/2.png',),),
                title: Text('xxxxx',style: TextStyle(fontSize: 20),),
                subtitle: Text('xxxxxxx'),
              ),
            ],
          ),  
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(aspectRatio: 17/9,child: Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover,),),
              ListTile(
                leading: CircleAvatar(backgroundImage: NetworkImage('https://www.itying.com/images/flutter/2.png',),),
                title: Text('xxxxx',style: TextStyle(fontSize: 20),),
                subtitle: Text('xxxxxxx'),
              ),
            ],
          ),  
        ),
      ],
    );
  }
}