美文网首页
Flutter Card卡片布局

Flutter Card卡片布局

作者: 前端新阳 | 来源:发表于2020-05-25 23:13 被阅读0次

    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

    相关文章

      网友评论

          本文标题:Flutter Card卡片布局

          本文链接:https://www.haomeiwen.com/subject/smrpahtx.html