Flutter 学习笔记（六） AspectRatio / Card 卡片组件

AspectRatio 组件

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

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

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

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

Card 组件

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

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

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('张三'), subtitle: Text('高级工程师')),
            ListTile(title: Text('电话: xxxxxx')),
            ListTile(title: Text('地址: XXXXXX'))
          ])),
      Card(
          margin: EdgeInsets.all(10),
          child: Column(children: <Widget>[
            ListTile(title: Text('李四'), subtitle: Text('高级工程师')),
            ListTile(title: Text('电话: xxxxxx')),
            ListTile(title: Text('地址: XXXXXX'))
          ]))
    ]);
  }
}

完成如下卡片案例效果：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(children: <Widget>[
      Card(
          margin: EdgeInsets.all(10),
          child: Column(children: <Widget>[
            AspectRatio(
                aspectRatio: 2.0 / 1.0,
                child: Image.network(
                    "https://www.itying.com/images/flutter/1.png",
                    fit: BoxFit.cover)),
                    ListTile(
                      title: Text("hello"),
                      subtitle: Text(
                          "掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货",
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis),
                      leading: CircleAvatar(
                        backgroundImage:
                            NetworkImage("https://www.itying.com/images/flutter/1.png"),
                      ),
                    )
          ])),
    ]);
  }
}