Flutter Card卡片布局

2020-05-25  本文已影响0人  前端新阳

Card卡片布局

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: Text('河北省保定市清苑区',style: TextStyle(fontWeight: FontWeight.w700),),
            subtitle: Text('LuckyLink:13822220000'),
            leading: new Icon(Icons.account_box,color: Colors.lightBlueAccent,)
          ),
          new Divider(),    // 分割线
          ListTile(
              title: Text('上海市杨浦区军工路516号',style: TextStyle(fontWeight: FontWeight.w700),),
              subtitle: Text('LuckyLink:15325716666'),
              leading: new Icon(Icons.account_box,color: Colors.lightGreenAccent,)
          ),
          new Divider(),
          ListTile(
              title: Text('浙江省杭州市滨江区铂金时代小区',style: TextStyle(fontWeight: FontWeight.w700),),
              subtitle: Text('LuckyLink:15121176067'),
              leading: new Icon(Icons.account_box,color: Colors.orangeAccent,)
          ),
        ],
      ),
    );
    return MaterialApp(
        title: 'Link World!',
        home: Scaffold(
            appBar: new AppBar(title: new Text('PositionedWidget层叠布局')),
            body: Center(
              child: card
            )
        )
    );
  }
}

【效果】如下:


image.png
上一篇下一篇

猜你喜欢

热点阅读