AspectRatio & Card - flutter

 AspectRatio(
        aspectRatio:  2 / 3, //宽高比
        child: Container(
          color: Colors.red,
        )
    );
ListView(
        children: [
          Card(
            elevation: 5, //设置阴影
            shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))), //设置圆角
            margin: EdgeInsets.all(10),
            child: Column(
              children: [
                ListTile(
                  title: Text("Name"),
                  subtitle: Text("工作单位"),
                ),
                ListTile(
                  title: Text("电话号码: 189XXXXXXXX"),
                ),
                ListTile(
                  title: Text("地址: XXXX XXXX XXX"),
                )
              ],
            ),
          ),
          Card(
            elevation: 5, //设置阴影
            shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))), //设置圆角
            margin: EdgeInsets.all(10),
            child: Column(
              children: [
                ListTile(
                  title: Text("Name"),
                  subtitle: Text("工作单位"),
                ),
                ListTile(
                  title: Text("电话号码: 189XXXXXXXX"),
                ),
                ListTile(
                  title: Text("地址: XXXX XXXX XXX"),
                )
              ],
            ),
          ),

        ],
    );

一个小案例

ListView(
      children: [
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2767608770,826089718&fm=26&gp=0.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2767608770,826089718&fm=26&gp=0.jpg"),
                ),
                title: Text("XXX"),
                subtitle: Text("XXXXXXXXXXXXXXXXXXXXXXXXX"),
              ),
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 16 / 9,
                child: Image.network(
                  "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2767608770,826089718&fm=26&gp=0.jpg",
                  fit: BoxFit.cover,
                ),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2767608770,826089718&fm=26&gp=0.jpg"),
                ),
                title: Text("XXX"),
                subtitle: Text("XXXXXXXXXXXXXXXXXXXXXXXXX"),
              ),
            ],
          ),
        ),
      ],
    );
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值