技術胖Flutter第三季-18佈局CardWidget 卡片佈局組件

技術胖Flutter第三季-18佈局CardWidget 卡片佈局組件

 

 博客地址：

https://jspang.com/post/flutter3.html#toc-420

 

最外面是Card佈局，裏面放column佈局

 

 

 

 

在column佈局裏面用ListTiel　　佈局

下面再複製這兩個ListTiel元素

在每行下面加一個分割線

 

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.w500)),
            subtitle: Text('wjw 18678831122'),
            leading: new Icon(Icons.account_box,color:Colors.lightBlue),
          ),
          new Divider(),
          ListTile(
            title:Text('山東省濟南市歷下區',style:TextStyle(fontWeight:FontWeight.w500)),
            subtitle: Text('wjw 18678831122'),
            leading: new Icon(Icons.account_box,color:Colors.lightBlue),
          ),
          new Divider(),
          ListTile(
            title:Text('山東省濟南市歷下區',style:TextStyle(fontWeight:FontWeight.w500)),
            subtitle: Text('wjw 18678831122'),
            leading: new Icon(Icons.account_box,color:Colors.lightBlue),
          ),
        ],
      ),
    );
    return MaterialApp(
      title:'Row Widget Demo',
      home:Scaffold(
        appBar: new AppBar(
          title: new Text('Card佈局'),
        ),
        body:Center(
          child: card,
        )
      )
    );
  }
}