您现在的位置是:首页 > 网络技术网络技术

Flutter学习笔记十二——Card Widget卡片组件布局

查看 旭日哥哥 的更多文章2021-03-08【网络技术】122人已围观

Card Widget

类似于material design里的CardView,以物理卡片的形态进行展示。
来看示例效果图:

示例代码:

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Layout Widget',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stack Widget'),
          backgroundColor: Colors.deepPurple,
        ),
        body: Center(
          child: MyCardWidget(),
        ),
      ),
    );
  }}class MyCardWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.white30,
      margin: EdgeInsets.all(10.0),
      child: Column(
        children: <Widget>[
          ListTile(
            title: Text(
              "齐达内选择皇马新三叉戟",
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: Text('阿扎尔、姆巴佩、博格巴,MPH组合:“冒牌货组合”'),
            leading: Icon(
              Icons.filter_1,
              color: Colors.lightBlue,
            ),
          ),
          Divider(),
          ListTile(
            title: Text(
              "锤子软件10位高管集体退出,罗永浩卸任法人代表",
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: Text(
                '锤子软件(北京)有限公司近日发生工商变更,法定代表人从罗永浩变更为温洪喜,锤子科技CTO钱晨、陌陌CEO唐岩等10位高管从主要人员中移除'),
            leading: Icon(
              Icons.filter_2,
              color: Colors.lightBlue,
            ),
          ),
          Divider(color: Colors.grey),
          ListTile(
            title: Text(
              "湖人有意用卡莱尔替代沃顿?",
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            subtitle: Text('库班回应:哈哈哈'),
            leading: Icon(
              Icons.filter_3,
              color: Colors.lightBlue,
            ),
          ),
          Divider(color: Colors.grey),
        ],
      ),
    );
  }}

Card()组件的child:使用了Column垂直布局,并使用ListTile()进行填充。Divider()是分割线,也可以使用color:属性添加颜色。在ListTile()中使用title:标题加粗,subtitle:副标题和leading:图标。
Card Widget就简单的介绍到这了


Tags: flutter

文章评论

猜你喜欢

爱诚帝

V管理员
文章 320 篇 | 评论 4 次
最新文章

最新留言