Flutter Card卡片布局

Card卡片布局

  • main.dart代码:
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
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容