Flutter 学习：AspectRation、card卡片组件

一.复习上一节

1. Stack组件中的alignment属性是不能对单独子view做调整的
2. 结合Stack+Align 组件控制子view的位置。
3. 结合Stack+Positioned 组件控制子view的位置。

二. AspectRation组件

• AspectRation 作用

  AspectRation的作用是根据设置 调整child的宽高比（相对于父元素）

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

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

• 常用属性

  aspectRation: 宽高比（要看外层是否允许按照这个比例布局，这只是一个参考值）

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return AspectRatio(
      aspectRatio: 2 / 1,
      child: Container(
        color: Colors.pink,
      ),
    );
  }
}

• 注意

  aspectRatio 的宽高比是相对于父元素的

• 效果图

image.png

三. Card组件

• Card组件是卡片组件块，内容可以有大多是类型的Widget构成,Card具有圆角和阴影的效果，看起来更有立体感

• 常用属性

  margin:外边距
  child：子组件
  shape：Card的阴影效果，默认效果为圆角的长方形。

• 实现以下效果

  
  image.png

• 代码

class MyBody extends StatelessWidget {
  List<Widget> _getItemView() {
    var map = listData.map((value) {
      return Card(
          child: Column(children: <Widget>[
        AspectRatio(
          aspectRatio: 2 / 1,
          child: Image.network(
            value["iamge"],
            fit: BoxFit.fill,
          ),
        ),
        ListTile(
          title: Text(value["title"]),
          subtitle: Text(value["subTitle"]),
        )
      ]));
    });
    return map.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: _getItemView(),
    );
  }
}

• 注意

  1.代码中通过 ListView +CardView +Column 实现。
  2.Flutter 中ListView不能嵌套ListView，否则会报错。

  3. CircleAvatar 为专门处理原型头像的组件CircleAvatar(backgroundImage: NetworkImage("")) ，这里也可以用ClipOval。

四. 总结

1.AspectRation组件设置子元素的宽高比
AspectRatio(aspectRatio: , child: )

2.Card 卡片布局自带阴影
Card( child: )