Flutter 11 - 页面布局之 AspectRatio、Card 组件详解

一、AspectRatio 组件

AspectRatio 的作用是根据设置调整子元素 child 的宽高比。

AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的，类似于 BoxFit 中的 contain，按照固定比率去尽量占满区域。

如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。

属性	说明
aspectRatio	宽高比，最终可能不会根据这个值去布局，具体则要看综合因素， 外层是否允许按照这种比率进行布局，这只是一个参考值。
child	子组件

class AspectRatioWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Center(
          child: Container(
            width: 200,
            child: AspectRatio(
              aspectRatio: 2.0 / 1.0, 
              child: Container(
                color: Colors.red
              )
            )
          )
        );
    }
}

AspectRatioWidget.png

二、Card 组件

Card 是卡片组件块，内容可以由大多数类型的 Widget 构成，Card 具有圆角和阴影，这让它
看起来有立体感。

属性	说明
margin	外边距
child	子组件
Shape	Card 的阴影效果，默认的阴影效果为圆角的长方形边。

class CardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              ListTile(
                title: Text('叶修', style: TextStyle(fontSize: 28)),
                subtitle: Text('iOS高级工程师')
              ),
              Divider(),
              ListTile(title: Text('电话：138001380000')),
              ListTile(title: Text('地址：广东省东莞市'))
            ]
          )
        ),

        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              ListTile(
                title: Text('叶秋', style: TextStyle(fontSize: 28)),
                subtitle: Text('Android高级工程师')
              ),
              Divider(),
              ListTile(title: Text('电话：138001380001')),
              ListTile(title: Text('地址：广东省深圳市'))
            ]
          )
        )
      ]
    );
  }
}

CardWidget.png

三、使用 Card 组件实现一个图文列表布局

  // listData.dart
  
  List listData = [
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-f214cb00231a4784.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
          "description": 'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-6f3e06b72ac3f406.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
          "description": 'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-2e006a5894bbab1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
          "description": 'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-7bd40d0269c75a40.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
          "description": 'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-684693c44f575ace.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
          "description": 'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-3b56e58df8c7e1c7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
          "description": 'Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time. Flutter works with existing',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://upload-images.jianshu.io/upload_images/8863827-a3b61e6cf2426326.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
          "description": 'Dart is a client-optimized language for fast apps on any platform... Dart is a client-optimized language for fast apps on any platform Optimizedfor',
      }      

  ];

class CardWithImageTextWidget extends StatelessWidget {

  Widget build(BuildContext context) {
    return ListView(
      children: listData.map((value){
        return Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(value['imageUrl'], fit: BoxFit.cover)
              ),
              ListTile(
                title: Text(value['title']),
                subtitle: Text(value['description'], overflow: TextOverflow.ellipsis),
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(value['imageUrl']),
                )
              )
            ]
          )
        );
      }).toList()
    );
  }
}

CardWithImageTextWidget.png