6 Flutter UI 之 AspectRatio，Card,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",
            ),
          ],
        )