今是昨非

今是昨非

日出江花红胜火,春来江水绿如蓝

Flutter布局基础——Card

Flutter 布局基础 ——Card#

Card,卡片式布局,带有一点圆角和阴影。通常用于关联信息的展示,比如:相册信息、经纬度、联系人信息等等。

Card 的使用#

来看一下,如何做一个,常见的列表元素的控件,左侧是个 Icon,上面是 title,然后是 desc,最下面是按钮,常见于订单列表。

要实现的效果如下:

wecom20210727-134944.png

然后看如何实现:

ListTile#

这里需要介绍一下ListTile,Flutter 提供的固定高度的,左侧或右侧带有 Icon 以及文案的控件。

可实现效果如下:

wecom20210727-140952.png

代码如下:


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('ListTile View'),
        ),
        body: ListView(
          children: [
            Card(
              child: ListTile(
                title: Text('One-line ListTile'),
              ),
            ),
            Card(
              child: ListTile(
                leading: FlutterLogo(),
                title: Text('One-line with leading widget'),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('One-Line with trailing widget'),
                trailing: Icon(Icons.more_vert),
              ),
            ),
            Card(
              child: ListTile(
                leading: FlutterLogo(),
                title: Text('One-line with both widgets'),
                trailing: Icon(Icons.more_vert),
              ),
            ),
            Card(
              child: ListTile(
                title: Text('One-line dense ListTile'),
                dense: true,
              ),
            ),
            Card(
              child: ListTile(
                leading: FlutterLogo(
                  size: 56.0,
                ),
                title: Text('Two-line listTile'),
                subtitle: Text('Here is a second line'),
                trailing: Icon(Icons.more_vert),
              ),
            ),
            Card(
              child: ListTile(
                leading: FlutterLogo(),
                title: Text('Three-line ListTile'),
                subtitle:
                    Text('A sufficiently long subtitle warrants three lines'),
                trailing: Icon(Icons.more_vert),
                isThreeLine: true,
              ),
            )
          ],
        ),
      ),
    );
  }
}

上面的代码介绍了ListTile的使用,已经覆盖很全面。

然后再来看最初想要实现的效果,分割成已知的基础控件如下:

wecom20210727-141433.png

Icon 加右侧的 title 和 desc 可以使用上面介绍的ListTile,下面单个按钮可以使用TextButton(额,还没介绍,稍等补上一篇,目前可以用Text),两个按钮水平布局可以使用RowListTileRow的上下布局可以使用 Column,然后最外层再用 Card,卡片对象包括起来,所以最终代码如下:


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Card View';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Card View',
        home: Scaffold(
          appBar: new AppBar(title: new Text(_title)),
          body: const MyStatelessWidget(),
        ));
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        child: Column(
          children: [
            const ListTile(
              leading: Icon(Icons.album),
              title: Text('The Enchanted nigtingale'),
              subtitle: Text('Music by Julie Gable, Lyrics By Sidney Stenic'),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                TextButton(onPressed: () {}, child: Text('BUY TICKETS')),
                SizedBox(
                  width: 8,
                ),
                TextButton(onPressed: () {}, child: const Text('LISTEN')),
                SizedBox(width: 8),
              ],
            )
          ],
          mainAxisSize: MainAxisSize.min,
        ),
      ),
    );
  }
}

最终效果就为上面的效果了,要注意Card的使用,通常是结合ColumnRow等其他集合类的组件来实现的。

参考#

Card Dev Doc
ListTile Dev Doc
Flutter 免费视频第三季 - 布局

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。