Flutter开发之——Card

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • Card是Material风格的卡片控件，Card有较小的圆角和阴影。
  • Card通常用于展示一组信息

二 Card

2.1 构造方法

1
2
3
4
5
6
7
8
9
10
11
12
const Card({
   Key? key,
   this.color,
   this.shadowColor,
   this.elevation,
   this.shape,
   this.borderOnForeground = true,
   this.margin,
   this.clipBehavior,
   this.child,
   this.semanticContainer = true,
 })

2.2 属性说明

属性 说明 取值
color 背景颜色 Color
elevation 阴影值 double
shadowColor 阴影颜色 Color
child 子控件 Widget
shape 形状 ShapeBorder

三 示例

3.1 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
Column(
       children: [
       Card(
              shadowColor: Colors.yellowAccent,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
              //color: Colors.orange,
              elevation: 30,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const ListTile(
                    leading: Icon(Icons.album),
                    title: Text('Title-1'),
                    subtitle: Text('Subtitle-1'),
                  ),
                  Row(children: [
                    FlatButton(child: const Text('OK',style:TextStyle(color: Colors.blue) ,), onPressed: () {},),
                    FlatButton(child: const Text('Cancel',style:TextStyle(color: Colors.blue)), onPressed: () {},),
                  ],)
                ],
              ),
            ),
            Divider(thickness: 10,indent: 20,endIndent: 20,color: Colors.deepOrange,),
            Card(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
              //color: Colors.orange,
              elevation: 10,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const ListTile(
                    leading: Icon(Icons.album),
                    title: Text('Title-2'),
                    subtitle: Text('Subtitle-2'),
                  ),
                  Wrap(children: [
                    FlatButton(child: const Text('OK',style:TextStyle(color: Colors.blue) ,), onPressed: () {},),
                    FlatButton(child: const Text('Cancel',style:TextStyle(color: Colors.blue)), onPressed: () {},),
                  ],)
                ],
              ),
            ),
            Divider(thickness: 10,indent: 20,endIndent: 20,color: Colors.green,),
            Card(
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
              //color: Colors.orange,
              elevation: 10,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const ListTile(
                    leading: Icon(Icons.album),
                    title: Text('Title-3'),
                    subtitle: Text('Subtitle-3'),
                  ),
                  ButtonBar(
                    children: <Widget>[
                      FlatButton(child: const Text('OK'), onPressed: () {},),
                      FlatButton(child: const Text('Cancel'), onPressed: () {},),
                    ],
                  )
                ],
              ),
            ),
          ],
        )

3.2 效果图