小菜鸡开始学习flutter之二十五

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第25天，点击查看活动详情

今日目标

今天主要学习flutter里的AspectRatio和Card这两个组件

AspectRatio

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

组件属性

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

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

可以看到我们并没有直接去指定红色方框的大小，只是通过aspectratio指定了子元素的宽高比，子元素就会按照各比例尽可能的去占满父组件的空间。

Card

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

组件属性

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

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: [
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              ListTile(
                title: Text('你太有才了',style: TextStyle(fontSize: 20.0),),
                subtitle: Text('xitu掘金'),
              ),
              ListTile(
                title: Text('落花本是无情物'),
                subtitle: Text('化作春泥更护花'),
              )
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              ListTile(
                title: Text('你太有才了',style: TextStyle(fontSize: 20.0),),
                subtitle: Text('xitu掘金'),
              ),
              ListTile(
                title: Text('落花本是无情物'),
                subtitle: Text('化作春泥更护花'),
              )
            ],
          ),
        )
      ],
    );
  }
}

如上我们就实现了一个卡片列表，这里要注意一下，在listview里面我们不可以再直接嵌套listview

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: [
        Card(
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 2 / 1,
                child: Image.network(
                  'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image',
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                title: Text('你太有才了~~'),
                subtitle: Text('xitu掘金'),
                leading: Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      image: DecorationImage(
                          image: NetworkImage(
                              'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image'))),
                ),
              )
            ],
          ),
        )
      ],
    );
  }
}

这样我们就实现了一个还不错的图文列表。对于圆形图片处理还可以通过clipoval和circleavatar这两个组件处理，通常我们使用circleavatar来处理头像的图片。

ending

持续学习~~ 如有错误的地方还请指正