C/C++教程

Flutter AspectRatio组件与Card组件

本文主要是介绍Flutter AspectRatio组件与Card组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
  1. AspectRatio组件

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

AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度是由宽

度和比率决定的,类似于 BoxFit 中的 contain,按照固定比率去尽量占满区域。

简单来说AspectRatio可以通过宽高的比例去设置子元素

aspectRatio属性:宽高比值

child:子元素

 AspectRatio(
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network(
                value["imageUrl"],
                fit: BoxFit.cover,
              ) //AspectRatio(aspectRatio:宽/高,child:) 这里宽高是根据父级的宽高来设置
              ,
            ),
 )

 

  1. Card卡片组件

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

属性:

margin:外边距

child:子组件

Shape:Card 的阴影效果,默认的阴影效果为圆角的长方形边。

 

接下来的案例我们通过遍历将数组渲染在我们的卡片上

这是我的一个数组列表:

引入数组文件:

import 'res/listdate.dart';

 

完整代码实例:

 

class Mycentedd extends StatelessWidget {
  List<Widget> _getlistDate() {
    var listtmp = 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,
              ) //AspectRatio(aspectRatio:宽/高,child:) 这里宽高是根据父级的宽高来设置
              ,
            ),
            SizedBox(height: 10),
            ListTile(
              leading: CircleAvatar(
                backgroundImage: NetworkImage(value["imageUrl"]),
              ),
              title: Text(value["title"]),
              subtitle: Text("Flutter Chinese network is the largest flutter developer exchange and learning platform in China, and is committed to building a flutter development Chinese community. Code examples and project cases can be easily found here, and special personnel can provide the latest document translation",overflow:TextOverflow.ellipsis),
            )
          ],
        ),
      );
    });

    return listtmp.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(children: _getlistDate());
  }
}

 

  1. 效果图:

 

这篇关于Flutter AspectRatio组件与Card组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!