AspectRatio

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

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //获取设备的宽度和高度

    return AspectRatio(
      aspectRatio: 3 / 1, //高度/占用空间,宽度是整个宽度
      child: Container(
        color: Colors.red,
      ),
    );
  }
}

Card

Card实现一个通讯录的卡片

属性	说明
margin	外边距
child	子组件
elevation	阴影值的深度
color	颜色
clipBehavior	clipBehavior内容溢出剪切方式 Clip.hardEdge剪切但不应用抗锯齿
Shape	Card阴影效果

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //获取设备的宽度和高度

    return GridView.count(
      crossAxisCount: 2,
      children: [
        Card(
            // color: Colors.red,
            elevation: 10,
            child: Column(
              children: [
                AspectRatio(
                  aspectRatio: 4 / 3,
                  child: Image.network(
                    "http://124.223.18.34:5555/static/images/zzjsfcka/zzjsfcka2FM.jpg",
                    fit: BoxFit.cover,
                    alignment: Alignment.topCenter,
                  ),
                ),
                const Text("总之就是非常可爱第二季")
              ],
            )),
        Card(
          // color: Colors.red,
          elevation: 10,
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 4 / 3,
                child: Image.network(
                  "http://124.223.18.34:5555/static/images/blzh/blzhFM.jpg",
                  fit: BoxFit.cover,
                  // alignment: Alignment.topCenter,
                ),
              ),
              const Text("碧蓝之海")
            ],
          ),
        )
      ],
    );
  }
}

CircleAvatar

CircleAvatar来实现一个圆形图片

const ListTile(
  leading: CircleAvatar(
  backgroundImage: NetworkImage("http://124.223.18.34:5555/static/images/zzjsfcka/zzjsfcka2FM.jpg"),
  ),
  title: Text("总之就是非常可爱第二季"),
)

定义方法封装

我们都知道最好一定义一个私有方法去封装这个格式不然每次去重复定义会显得很乱

List listData = [
  {
    "imageUrl":
        "http://124.223.18.34:5555/static/images/zzjsfcka/zzjsfcka2FM.jpg",
    "name": "总之就是非常可爱第二季",
  },
  {
    "imageUrl": "http://124.223.18.34:5555/static/images/blzh/blzhFM.jpg",
    "name": "碧蓝之海",
  },
];

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  List<Widget> _initCradData() {
    var tempList = listData.map((value) {
      return Card(
        elevation: 10,
        child: Column(
          children: [
            AspectRatio(
              aspectRatio: 4 / 3,
              child: Image.network(
                value["imageUrl"],
                fit: BoxFit.cover,
                alignment: Alignment.topCenter,
              ),
            ),
            Text(value["name"])
          ],
        ),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    //获取设备的宽度和高度

    return GridView.count(
      crossAxisCount: 2,
      children: _initCradData(),
    );
  }
}