Flutter基础学习 14-19 卡片组件布局(Card)

版权声明：署名，允许他人基于本文进行创作，且必须基于与原先许可协议相同的许可协议分发本文 （Creative Commons）

        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),  // 设置主题颜色
    );
  }
}