8.Flutter学习之AspectRatio、Card组件

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子组件
ShapeCard阴影效果,默认的阴影效果为圆角的长方形边

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(),
    );
  }
}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值