Flutter还有一种比较比较酷炫的布局方式,我称它为卡片式布局。这种布局类似ViewList,但是列表会以物理卡片的形态进行展示。
demo如下:
布局:比如我们现在要开发一个类似电话记录列表,并且列表外部使用一个卡片式布局。
卡片式布局默认是撑满整个外部容器的,如果你想设置卡片的宽高,需要在外部容器就进行制定。制作的效果如图:
代码:代码中使用了一个垂直布局组件Column组件,然后利用了ListTile
实现内部列表,这里需要说明的是ListTile不光可以使用在ListView组件中,然后容器组件其实都可以使用。代码如下:
import 'package:flutter/material.dart';
//主函数(入口函数)
void main() {
runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget:具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
var card=new Card( //创建一个卡片布局的变量
child: Column( //卡片内是垂直布局
children: <Widget>[
new ListTile( //使用ListTile组件作为子布局
leading: new Icon(Icons.account_box,color:Colors.lightBlue),
title: new Text('隔壁老王 ',style:TextStyle(fontWeight: FontWeight.w500)),
subtitle: new Text('手机号:12345678945'),
),
new Divider(color: Colors.lightBlue), //设置分割线
new ListTile(
leading: new Icon(Icons.account_box,color:Colors.lightBlue),
title: new Text('隔壁老李 ',style:TextStyle(fontWeight: FontWeight.w500)),
subtitle: new Text('手机号:12345678945'),
),
new Divider(color: Colors.lightBlue),
new ListTile(
leading: new Icon(Icons.account_box,color:Colors.lightBlue),
title: new Text('隔壁老蒋 ',style:TextStyle(fontWeight: FontWeight.w500)),
subtitle: new Text('手机号:12345678945'),
),
new Divider(color: Colors.lightBlue),
new ListTile(
leading: new Icon(Icons.account_box,color:Colors.lightBlue),
title: new Text('隔壁老孙',style:TextStyle(fontWeight: FontWeight.w500)),
subtitle: new Text('手机号:12345678945'),
),
new Divider(color: Colors.lightBlue),
new ListTile(
leading: new Icon(Icons.account_box,color:Colors.lightBlue),
title: new Text('隔壁老弟 ',style:TextStyle(fontWeight: FontWeight.w500)),
subtitle: new Text('手机号:12345678945'),
),
],
),
);
//返回一个material风格的组件
return MaterialApp(
title: 'Welcome to Flutter',
//Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
home: Scaffold( //home : 应用默认所显示的界面 Widget
appBar: AppBar(
title: Text('垂直布局'),
),
body:Center(
child: card //添加卡片布局变量
)
),
theme: new ThemeData(primaryColor: Colors.red), // 设置主题颜色
);
}
}