Flutter 佈局基礎 ——Card#
Card，卡片式佈局，帶有一點圓角和陰影。通常用於關聯信息的展示，比如：相冊信息、經緯度、聯絡人信息等等。
Card 的使用#
來看一下，如何做一個，常見的列表元素的控件，左側是一個 Icon，上面是 title，然後是 desc，最下面是按鈕，常見於訂單列表。
要實現的效果如下：
然後看如何實現：
ListTile#
這裡需要介紹一下ListTile，Flutter 提供的固定高度的，左側或右側帶有 Icon 以及文案的控件。
可實現效果如下：
代碼如下：
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('單行 ListTile'),
),
),
Card(
child: ListTile(
leading: FlutterLogo(),
title: Text('帶有前導小部件的單行'),
),
),
Card(
child: ListTile(
title: Text('帶有尾隨小部件的單行'),
trailing: Icon(Icons.more_vert),
),
),
Card(
child: ListTile(
leading: FlutterLogo(),
title: Text('帶有兩個小部件的單行'),
trailing: Icon(Icons.more_vert),
),
),
Card(
child: ListTile(
title: Text('單行緊湊 ListTile'),
dense: true,
),
),
Card(
child: ListTile(
leading: FlutterLogo(
size: 56.0,
),
title: Text('雙行 listTile'),
subtitle: Text('這裡是第二行'),
trailing: Icon(Icons.more_vert),
),
),
Card(
child: ListTile(
leading: FlutterLogo(),
title: Text('三行 ListTile'),
subtitle:
Text('足夠長的副標題需要三行'),
trailing: Icon(Icons.more_vert),
isThreeLine: true,
),
)
],
),
),
);
}
}
上面的代碼介紹了ListTile的使用，已經覆蓋很全面。
然後再來看最初想要實現的效果，分割成已知的基礎控件如下：
Icon 加右側的 title 和 desc 可以使用上面介紹的ListTile，下面單個按鈕可以使用TextButton（額，還沒介紹，稍等補上一篇，目前可以用Text），兩個按鈕水平佈局可以使用Row，ListTile和Row的上下佈局可以使用 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('被施了魔法的夜鶯'),
subtitle: Text('音樂由朱莉·蓋布爾創作，歌詞由西德尼·斯特尼克創作'),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(onPressed: () {}, child: Text('購買票券')),
SizedBox(
width: 8,
),
TextButton(onPressed: () {}, child: const Text('聆聽')),
SizedBox(width: 8),
],
)
],
mainAxisSize: MainAxisSize.min,
),
),
);
}
}
最終效果就為上面的效果了，要注意Card的使用，通常是結合Column或Row等其他集合類的組件來實現的。