AspectRatio、Card 卡片组件

一、Flutter AspectRatio 组件

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

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

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

 

 

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

     

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

二、Flutter Card 组件

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

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

 

 

import 'package:flutter/material.dart';

class LayoutDemo 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("高级软件工程师")),
            Divider(),
            ListTile(title: Text("电话：1213214142")),
            ListTile(title: Text("地址：北京市海淀区"))
          ],
        ),
      ),
      Card(
        margin: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            ListTile(
              title: Text("李四", style: TextStyle(fontSize: 28)),
              subtitle: Text("高级软件工程师"),
            ),
            Divider(),
            ListTile(
              title: Text("电话：1213214142"),
            ),
            ListTile(title: Text("地址：北京市海淀区"))
          ],
        ),
      ),
    ]);
  }
}

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

import 'package:flutter/material.dart';

class LayoutDemo 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: 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(),
    );
  }
}