flutter之卡片布局

比如一个类似收获地址的列表效果如下:
flutter之卡片布局_第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>[
          ListTile(
            title:new Text('上海市普陀区',style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: new Text('cc:13020187230'),
            leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
          ),
          new Divider(),
          ListTile(
            title:new Text('上海市宝山区',style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: new Text('xx:13020187230'),
            leading: new Icon(Icons.account_circle,color: Colors.deepOrange,),
          ),
          new Divider(),
          ListTile(
            title:new Text('上海市静安区',style: TextStyle(fontWeight: FontWeight.w500)),
            subtitle: new Text('ss:13020187230'),
            leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
          ),
          new Divider(),
       ],
      ),
    );
    return MaterialApp(
      title: 'ListView widget',
      home: Scaffold(
        appBar: new AppBar(
          title: new Text('卡片布局'),
        ),
        body: Center(child: card,),
      ),
    );
  }
}

代码中使用了一个垂直布局组件Column组件,然后利用了ListTile实现内部列表,这里需要说明的是ListTile不光可以使用在ListView组件中,然后容器组件其实都可以使用

你可能感兴趣的:(flutter之卡片布局)