8.Flutter学习之AspectRatio、Card组件

易帜

发布于 2022-02-09 15:59:08

6360

发布于 2022-02-09 15:59:08

`AspectRatio`

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

当AspectRatio外层有限制时：

void main() => runApp(AspecRatioApp());

class AspecRatioApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter中AspecRatio演示'),
        ),
        body: AspecRatioWidget(),
      ),
    );
  }
}

class AspecRatioWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Container(
      width: 200,
      color: Colors.blue,
      child: AspectRatio(
        aspectRatio: 2.0/1.0,
        child: Container(//根据宽高比计算的出高为100，宽为200
          color: Colors.red,
        ),
      ),
    );
  }
}

如图所示：

当外层不存在宽高限制时，即删除最外层Container其效果：从中可以看出我们的高度时宽度的一半。

Card组件

Card是卡片布局，内容可以由大多数类型的widget组成，Card具有圆角与阴影效果。

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

void main() => runApp(AspecRatioApp());

class AspecRatioApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter中AspecRatio演示'),
        ),
        body: AspecRatioWidget(),
      ),
    );
  }
}

class AspecRatioWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return ListView(
      children: <Widget>[
        Card(
          margin:  EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text("战三"),
                subtitle: Text("android扫地僧"),
              ),
              ListTile(
                title: Text("联系方式：1XXXX"),
              ),
            ],
          ),
        ),
        Card(
          margin:  EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text("战三"),
                subtitle: Text("android扫地僧"),
              ),
              ListTile(
                title: Text("联系方式：1XXXX"),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

接下来进行实战：

void main() => runApp(AspecRatioApp());

class AspecRatioApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter中AspecRatio演示'),
        ),
        body: ImageAndText(),
      ),
    );
  }
}

class ImageAndText extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
                AspectRatio(aspectRatio: 16/9,
                  child:      Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2181014417,1375585590&fm=26&gp=0.jpg",fit: BoxFit.cover,),
                ),
              ListTile(
                leading: ClipOval(
                    child:      Image.network(
                      "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2181014417,1375585590&fm=26&gp=0.jpg",
                      fit: BoxFit.cover,
                      width: 50,
                      height: 50,
                    )
                ),
                title: Text('标题'),
                subtitle: Text('这是一个条重大新闻'),
              ),
            ],
          ),
        ),

        //另外一种方式实现圆形图片,一种专门的圆形头像控件CircleAvatar
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(aspectRatio: 16/9,
                child:      Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2181014417,1375585590&fm=26&gp=0.jpg",fit: BoxFit.cover,),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage:NetworkImage ("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2181014417,1375585590&fm=26&gp=0.jpg")
                ),
                title: Text('标题'),
                subtitle: Text('这是一个条重大新闻'),
              ),
            ],
          ),
        )
      ],
    );
  }
}

进行json解析并呈现在界面上： json数据如下：

List listData=[
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
  {
    "title":"五资妈ki 那鲁托--漩涡鸣人",
    "author":"卡诶本新诺酒煮---影分身之术",
    "imageUrl":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1578674333725&di=ec3da407df99c6251631c8be300cd479&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D2008737948%2C2044904539%26fm%3D214%26gp%3D0.jpg",
  },
  {
    "title":"萨斯给",
    "author":"啊妈忒路斯",
    "imageUrl":"http://n.sinaimg.cn/sinacn/w813h463/20180130/46b9-fyrcsrv7304762.png",
  },
];

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/listData.dart';

void main() => runApp(AspecRatioApp());

class AspecRatioApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter中AspecRatio演示'),
        ),
        body: ImageAndText(),
      ),
    );
  }
}

class ImageAndText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: listData.map((value) {
        return Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  value['imageUrl'],
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: CircleAvatar(
                    backgroundImage: NetworkImage(
                  value['imageUrl'],
                )),
                title: Text(value['title']),
                subtitle: Text(value['author']),
              ),
            ],
          ),
        );

      }).toList(),
    );
  }
}