Flutter 组件之 AspectRatio、Card

1、AspectRatio

AspectRatio 的作用是根据设置调整子元素 child 的宽高比。它会在布局限制条件允许的范围内尽可能的扩展，widget 的高度是由宽度和比率决定的。如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio 最终将会去优先适应布局限制条件，而忽略所设置的比率。

属性

 AspectRatio AspectRatio({
  Key? key,
  //宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这种比率进行布局，这只是一个参考值。
  required double aspectRatio,
  Widget? child,
})

示例

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      //width: 300,
      child: AspectRatio(
        aspectRatio: 2,
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }
}

2、Card

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

属性

Card Card({
  Key? key,
  Color? color,  //背景颜色
  Color? shadowColor,  //阴影颜色
  Color? surfaceTintColor,
  double? elevation,  //阴影值的深度
  /*
  //Card 的阴影效果，默认的阴影效果为圆角的长方形边。 
    shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),
  */
  ShapeBorder? shape,  
  bool borderOnForeground = true, //表示是否将 Card 的 border 在 child 之前展示。
  EdgeInsetsGeometry? margin,  //外边距
  /*
    clipBehavior 内容溢出的剪切方式。 
    Clip.none 不剪切；
    Clip.hardEdge 裁剪但不应用抗锯齿；
    Clip.antiAlias 裁剪而且抗锯齿；
    Clip.antiAliasWithSaveLayer 带有抗锯齿的剪辑并在剪辑之后立即保存 saveLayer。
  */
  Clip? clipBehavior,
  Widget? child,
  //表示 Card 中的 child 是否都具有相同的 semantic 或者说他们的类型是一致的。
  bool semanticContainer = true,
})

示例

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const [
        Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ),
          elevation: 20,
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              ListTile(
                title: Text(
                  "张三",
                  style: TextStyle(fontSize: 30, color: Colors.black),
                ),
                subtitle: Text(
                  "高级软件工程师",
                  style: TextStyle(fontSize: 15, color: Colors.grey),
                ),
              ),
              Divider(
                height: 10,
                color: Colors.green,
              ),
              ListTile(
                title: Text(
                  "电话: 15101516327",
                  style: TextStyle(color: Colors.black, fontSize: 20),
                ),
              ),
              ListTile(
                title: Text(
                  "地址: 北京市海淀区中关村东路 107 号楼",
                  style: TextStyle(fontSize: 20, color: Colors.black),
                ),
              ),
            ],
          ),
        ),
        Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10)),
          ),
          elevation: 20,
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              ListTile(
                title: Text(
                  "李四",
                  style: TextStyle(fontSize: 30, color: Colors.black),
                ),
                subtitle: Text(
                  "高级软件开发工程师",
                  style: TextStyle(fontSize: 15, color: Colors.grey),
                ),
              ),
              Divider(
                height: 10,
                color: Colors.green,
              ),
              ListTile(
                title: Text(
                  "电话: 15101516327",
                  style: TextStyle(fontSize: 20, color: Colors.black),
                ),
              ),
              ListTile(
                title: Text(
                  "地址: 地球村中国北京市海淀区",
                  style: TextStyle(fontSize: 20, color: Colors.black),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

///图文列表卡片
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Card(
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10))),
          elevation: 20,
          margin: const EdgeInsets.all(10),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 2,
                child: Image.network(
                  "https://www.itying.com/images/flutter/1.png",
                  fit: BoxFit.cover,
                ),
              ),
              const ListTile(
                leading: CircleAvatar(
                  foregroundImage: NetworkImage(
                      "https://www.itying.com/images/flutter/1.png"),
                ),
                title: Text(
                  "XXXXX",
                  style: TextStyle(fontSize: 12, color: Colors.black),
                ),
                subtitle: Text(
                  "XXXXXXXXXX",
                  style: TextStyle(fontSize: 10, color: Colors.grey),
                ),
              ),
            ],
          ),
        ),
        Card(
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10))),
          elevation: 20,
          margin: const EdgeInsets.all(10),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 2,
                child: Image.network(
                    "https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,),
              ),
              const ListTile(
                leading: CircleAvatar(
                  foregroundImage: NetworkImage(
                      "https://www.itying.com/images/flutter/2.png"),
                ),
                title: Text(
                  "XXXXX",
                  style: TextStyle(fontSize: 12, color: Colors.black),
                ),
                subtitle: Text(
                  "XXXXXXXXXX",
                  style: TextStyle(fontSize: 10, color: Colors.grey),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

CircleAvatar 裁剪图片
CircleAvatar 不提供设置边框的属性。但是，可以将其包裹在具有更大半径和不同背景颜色的不同 CircleAvatar 中，以创建类似于边框的内容。

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const CircleAvatar(
      radius: 150,
      // backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),
      backgroundColor: Colors.lightBlue,
      child: CircleAvatar(
       radius: 120,
       backgroundImage: NetworkImage("https://www.itying.com/images/flutter/3.png"),
      ),
    );
  }
}