您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-09(AspectRatio 、Card 卡片组件)

2020-04-30【Flutter】867人已围观

简介## 一、Flutter AspectRatio 组件 `AspectRatio` 的作用是根据设置调整子元素 `child` 的宽高比。 `AspectRatio` 首先会在布局限制条件允许的范围内尽可能的扩展，`widget` 的高度是由宽度和比率决定的，类似于 `BoxFit` 中的 `contain`，按照固定比率去尽量占满区域。如果在满足所有限制条件过后无法找到一个可行的尺寸，`AspectRatio` 最终将会去优先适应布局限制条件，而忽略所设置的比率。属性

## 一、Flutter AspectRatio  组件

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

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

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

属性 | 说明
---|---
`aspectRatio` 宽高比，最终可能不会根据这个值去布局，
具体则要看综合因素，外层是否允许按照这种比率进行布局，这只是一个参考值 `child` 子组件

```
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Center(
      child: Container(
        width: 200,
        child: AspectRatio(
          aspectRatio: 2.0 / 1.0,
          child: Container(
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}
```

## 二、 Flutter Card

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

属性 | 说明
---|---
margin | 外边距
child | 子组件
Shape | Card 的阴影效果，默认的阴影效果为圆角的长方形边。

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302225233.png)

```
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text("张三", style: TextStyle(fontSize: 28)),
                subtitle: Text("高级软件工程师"),
              ),
              Divider(),
              ListTile(
                title: Text("电话：1213214142"),
              ),
              ListTile(title: Text("地址：北京市海淀区"))
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text("李四", style: TextStyle(fontSize: 28)),
                subtitle: Text("高级软件工程师"),
              ),
              Divider(),
              ListTile(
                title: Text("电话：1213214142"),
              ),
              ListTile(title: Text("地址：北京市海淀区"))
            ],
          ),
        )
      ],
    );
  }
}
```

## 三、 Flutter Card  组件实现一个图文列表布局

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302230243.png)

```
class LayoutDemo extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child:Column(
              children: <Widget>[
                  AspectRatio(
                    aspectRatio: 20/9,
                    child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,),
                  ),
                  ListTile(
                    leading: ClipOval(
                      child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,height:60,width: 60),
                    ),
                    title: Text("xxxx"),
                    subtitle: Text("xxxxxxx"),
                    
                  )

],
          ),

),
         Card(
          margin: EdgeInsets.all(10),
          child:Column(
              children: <Widget>[
                  AspectRatio(
                    aspectRatio: 20/9,
                    child: Image.network("https://www.itying.com/images/flutter/3.png",fit: BoxFit.cover,),
                  ),
                  ListTile(
                    leading: CircleAvatar(
                      backgroundImage:NetworkImage('https://www.itying.com/images/flutter/3.png')
                    ),
                    title: Text("xxxxxxxx"),
                    subtitle: Text("xxxxxxxxxx"),
                    
                  )
              ],
          ),

)
      ],
    );
  }
}
```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-08(页面布局 Stack 层叠组件 Stack 与与 Align Stack 与与 Positioned 现定位布局)

下一篇：flutter-10(页面布局 Wrap 组件)