it营大地专栏

Flutter Card卡片组件

发布于 8 个月前 作者 xuemeifenglin 690 次浏览 最后一次编辑是 8 个月前 来自 分享

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

1、 Flutter Card卡片组件常见属性

margin 外边距 child 子组件 Shape Card的阴影效果,默认的阴影效果为圆角的长方形边。

2、Flutter Card卡片实现一个列表页面布局

1.png

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[

         Card(
            margin: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text("张三",style: TextStyle(fontSize: 28)),
                  subtitle: Text("高级软件工程师"),
                ),
                Divider(),

                ListTile(
                  title: Text("电话:1213214142"),            
                ),
                ListTile(
                  title: Text("地址:北京市海淀区")         
                )
              ],
            ),
          ),
           Card(
            margin: EdgeInsets.all(10),
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text("李四",style: TextStyle(fontSize: 28)),
                  subtitle: Text("高级软件工程师"),
                ),
                Divider(),

                ListTile(
                  title: Text("电话:1213214142"),            
                ),
                ListTile(
                  title: Text("地址:北京市海淀区")         
                )
              ],
            ),
          )
      ],
    );    
  }
}

3、Flutter Card卡片组件实现图文列表布局

2.png

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    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(
                    title: Text(value["title"]),
                    subtitle: Text(value["description"],overflow:TextOverflow.ellipsis),
                    leading: CircleAvatar(
                      backgroundImage:NetworkImage(value["imageUrl"])
                    )
                  )
                  
                ],
            ),
          );
      }).toList(),
    );
    
  }
}
回到顶部