flutter--列表及表格布局

列表及表格布局

1. ListView布局

   Main.dart

   import 'package:flutter/material.dart';
   import 'list.dart';//引入list.dart,之后就可以使用其中的方法
   void main(){
    //程序入口
     runApp(
       new MaterialApp(
         title: "ListΩView布局示例",
         home: new MyApp(),
       )
     );
   }
   class MyApp extends StatelessWidget{
     @override
     Widget build(BuildContext context) {
       // TODO: implement build
       List<Widget> list = <Widget>[
         //调用listmethod方法来实现listTile组件的实例化
         listMethod('广州市黄埔大道建中路店','广州市福黄埔大道建中路3号',Icon(
             Icons.fastfood,
             color: Colors.orange,
           )
         ),
       listMethod('广州市白云区机场白云机场店','广州市白云区机场T3航站楼',Icon(
             Icons.airplay,
             color: Colors.blue,
           )
       ),
       listMethod('广州市中山大道中山大学附属学校','广州市中山大道45号',Icon(
             Icons.local_hospital,
             color: Colors.green,
           )
       ),
       listMethod('广州市天河区太平洋数码城','广州市天河区岗顶太平洋数码城',Icon(
             Icons.computer,
             color: Colors.deepPurple,
           )
       ),
       ];
       return new Scaffold(
         appBar: AppBar(
         title: new Text('ListView布局示例'),
         ),
         body: new Center(
           child: new ListView(
             children: list,
           ),
         ),
       );
     }
   }
   
   
   

   list.dart

   import 'package:flutter/material.dart';
   //利用这个方法，来实现组件的实例化
   Widget listMethod(String title,String subtitle,Icon leading){
     return ListTile(
       title: new Text(title,style: new TextStyle(fontWeight:FontWeight.w400,fontSize: 18.0),),
       subtitle: new Text(subtitle),
       leading: leading,
     );
   }
   

2. GridView布局

   main.dart

   import 'package:flutter/material.dart';
   import 'gridView.dart';
   import 'list.dart';
   void main(){
     runApp(
       // new MaterialApp(
       //   title: "ListΩView布局示例",
       //   home: new MyApp(),
       // )
         new MaterialApp(
           title: "GridView九宫格示例",
           home: new MyAppGrid(),
         )
     );
   }
   

   gridView,dart

   import 'package:flutter/material.dart';
   class MyAppGrid extends StatelessWidget{
     @override
     Widget build(BuildContext context) {
       // TODO: implement build
       //   使用generate构造图片列表
       List<Container> _buildGtidTitleList(int count){
         return new List<Container>.generate(count, (int index) => new Container(
           child: new Image.asset('images/${index + 1}.jpeg'),
           )
         );
       }
   
   
       // 渲染GridView
       Widget buildGrid(){
         // GridView.extent通过最大宽度创建GridView
         return new GridView.extent(
             maxCrossAxisExtent: 150.0,//次轴的宽度
             padding: const EdgeInsets.all(4.0),//上下左右内边距
             mainAxisSpacing:4.0,//主轴间隙
           crossAxisSpacing: 4.0,//次轴间隙
           children: _buildGtidTitleList(9),//添加9个元素
         );
       }
   
       return new Scaffold(
         appBar: AppBar(
           title: new Text('GridView九宫格示例'),
         ),
         body: new Center(
           child: buildGrid(),
         ),
       );
     }
   }
   

   其中用到的图片，要在工程文件下面建一个images文件夹，并把图片放在文件夹中，如图：

   

   要想访问到图片，还必须要在pubspec.yml工程配置文件中配置，如图：

   

   效果图如下：

   

3. Table布局

   在表格布局中，每一行的高度由其内容决定，每一列的宽度由columnwidths属性单独控制。

   属性名	类型	说明
   columnWidths	Map<int,TableColumnWidth>	设置每一列的宽度
   defaultColumnWidth	TableColumnWidth	默认的每一列宽度值，默认下均分
   textDirection	TextDirection	文字方向，一般无需考虑
   border	TableıBorder	表格边框
   defaultVerticalAlignment	TableCellVerticalAlignment	默认垂直方向对齐方式：top 顶部；middle 垂直居中；bottom 放在底部；baseline 文本baseline 对齐；fill 充满整个cell
   textBaseline	TextBaseline	defaultVerticalAlignment为baseline的时候，会用到这个属性

   代码示例：

   Main.dart

   import 'package:flutter/material.dart';
   import 'package:flutter_app/table.dart';
   import 'gridView.dart';
   import 'list.dart';
   void main(){
     runApp(
       // new MaterialApp(
       //   title: "ListΩView布局示例",
       //   home: new MyApp(),
       // )
       //   new MaterialApp(
       //     title: "GridView九宫格示例",
       //     home: new MyAppGrid(),
       //   )
       new MaterialApp(
       title: "Table示例",
       home: new MyAppTable(),
     )
   
     );
   }
   

   table.dart

   import 'package:flutter/material.dart';
   
   class MyAppTable extends StatelessWidget{
   
     @override
     Widget build(BuildContext context) {
       // TODO: implement build
       return new Scaffold(
         appBar: AppBar(
           title: new Text('Table表格布局示例'),
         ),
         body: new Center(
           child: Table(
               // 设置表格的列数，以及列宽
             columnWidths: const<int,TableColumnWidth>{
               0:FixedColumnWidth(100.0),
               1:FixedColumnWidth(40.0),
               2:FixedColumnWidth(80.0),
               3:FixedColumnWidth(80.0),
             },
             // defaultVerticalAlignment:TableCellVerticalAlignment.middle,
             border: TableBorder.all(color:Colors.black38,width: 2.0,style: BorderStyle.solid),
             children: <TableRow>[
               tableRow('姓名','性别','年龄','身高'),
               tableRow('张三','男','26','172'),
               tableRow('李四','男','28','178'),
   
             ],
           ),
         ),
       );
     }
     TableRow tableRow(String name,String sex,String old,String high){
       return TableRow(
           children: <Widget>[
             Text(name),
             Text(sex),
             Text(old),
             Text(high)
           ]
       );
     }
   }
   

   

总结：

在这里，我主要学习了listview、table、gridview这三个组件的基本使用。
好啦，这次的分享就到这里啦，下期见！