黑马程序员技术交流社区

标题: flutter中的卡片组件布局 [打印本页]

作者: 小江哥    时间: 2020-1-14 11:24
标题: flutter中的卡片组件布局
本帖最后由 小江哥 于 2020-1-14 11:26 编辑

Flutter还有一种比较比较酷炫的布局方式,我称 它为卡片式布局。这种布局类似ViewList,但是列表会以物理卡片的形态进行展示。
实例开发
比如我们现在要开发一个类似收获地址的列表,并且列表外部使用一个卡片式布局。
卡片式布局默认是撑满整个外部容器的,如果你想设置卡片的宽高,需要在外部容器就进行制定。
代码中使用了一个垂直布局组件Column组件,然后利用了ListTile实现内部列表,这里需要说明的是ListTile不光可以使用在ListView组件中,然后容器组件其实都可以使用。代码如下.
[AppleScript] 纯文本查看 复制代码
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('传智播客:111111111'),
               leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
             ),
             new Divider(),
              ListTile(
               title:new Text('北京市海淀区中国科技大学',style: TextStyle(fontWeight: FontWeight.w500),),
               subtitle: new Text('传智播客:111111111'),
               leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
             ),
             new Divider(),
              ListTile(
               title:new Text('河南省郑州市郑州大学',style: TextStyle(fontWeight: FontWeight.w500),),
               subtitle: new Text('传智播客:111111111'),
               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),
        ),
      );
  }
}






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2