Flutter学习第3章 卡片布局Card的使用

1、代码

import 'package:flutter/material.dart';

void main( ) => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    var card = new Card(
      child: Column(
        children: <Widget>[
          new ListTile(
            title: new Text('第一个列表',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: new Text('4524718@QQ.com'),
            leading: new Icon(Icons.account_box),
          ),
          new Divider(),//分割线
          new ListTile(
            title: new Text('第二个列表',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: new Text('4524718@QQ.com'),
            leading: new Icon(Icons.account_box),
          ),
          new Divider(),
          new ListTile(
            title: new Text('第三个列表',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: new Text('4524718@QQ.com'),
            leading: new Icon(Icons.account_box),
          ),
          new Divider(),
          new ListTile(
            title: new Text('第四个列表',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: new Text('4524718@QQ.com'),
            leading: new Icon(Icons.account_box),
          ),
          new Divider()
        ],
      ),

    );
        
    return MaterialApp(
      title: "flutter第三章学习 卡片布局",
      home:Scaffold(appBar: new AppBar(
        title: new Text('RowWidget组件学习')
      ),
      //层叠布局
      body: new Center(
        child: card,
      )
      )
    );
  }
}

1、new Card():就是卡片布局，意思就是能做出像一个卡片一样的布局效果，内部可以嵌套其他布局方式，这里使用垂直布局

2、 new Divider()：相当于分割线的效果

3、效果