6 Flutter UI 之 AspectRatio，Card,Wrap 组件_fultter中wrap组件怎么设定固定宽度-优快云博客

文章介绍了Flutter中的几个关键UI组件，包括AspectRatio用于保持子元素宽高比，Card组件创建具有阴影和圆角的卡片视图，ListView用于展示列表数据，以及如何结合AspectRatio显示图文列表。此外，还讲解了Wrap组件在实现流式布局中的应用。

一 AspectRatio

根据设置调整子元素的child 的宽高比。

body: Container(
          // 固定外层宽度
          width: 200,
          child: AspectRatio(
              // 宽高为3 比 1
              aspectRatio: 3,
              child: Container(
                color: Colors.red,
              )),
        )

二 Card 组件

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

 ListView(
          children: <Widget>[
            Card(
              margin: EdgeInsets.all(10),
              child: Column(children: <Widget>[
                ListTile(
                    title: Text("Name:Leonardo"),
                    subtitle: Text("Job:Famous Actor")),
                Divider(),
                ListTile(
                    title: Text("Address:China "),
                    subtitle: Text("Slogan:I will not make much difference"))
              ]),
            )
          ],
        )

三图文列表

ListView(
            children: listData.map((value) {
          return Card(
            margin: EdgeInsets.all(10),
            child: Column(
              children: [
                // 第一部分 图片组件 包裹比例放大
                AspectRatio(
                  aspectRatio: 20 / 9,
                  child: Image.network(
                    value["imageUrl"],
                    fit: BoxFit.fill,
                  ),
                ),
                // 第二部分 文字
                ListTile(
                  title: Text(value["title"]),
                  subtitle: Text(value["author"]),
                )
              ],
            ),
          );
        }).toList())

四 wrap 组件

Wrap 组件可以实现流布局

Wrap(
          // 排列的方向
          direction: Axis.horizontal,
          // 主轴的对齐方式
          alignment: WrapAlignment.start,
          // 纵轴的对齐方式
          runAlignment: WrapAlignment.center,
          // 横向的距离
          spacing: 10,
          // 纵向的距离
          runSpacing: 20,

          children: [
            MyButton(
              title: "very big apple",
            ),
            MyButton(
              title: "orange",
            ),
            MyButton(
              title: "egg is egg",
            ),
            MyButton(
              title: "beef",
            ),
            MyButton(
              title: "strawberry",
            ),
          ],
        )