Flutter Table

Flutter Table,几乎每一个前端技术的布局中都会有一种Table布局,这种组件太常见了,以至于其表现形式完全可以借鉴其他前端技术。表格布局中,每一行的高度由其内容决定,每一列的宽度由columnWidths属性单独控制。

Table组件属性见表:
Flutter Table

接下来编写一个用于员工基本信息统计的表格。Table布局完整的示例代码如下:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Table表格布局示例',
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Table表格布局示例'),
      ),
      // 表格居中
      body: Center(
        // 添加表格
        child: Table(
          // 设置表格有多少列,并且指定列宽
          columnWidths: const <int, TableColumnWidth>{
              // 指定索引及固定列宽
              0: FixedColumnWidth(100.0),
              1: FixedColumnWidth(40.0),
              2: FixedColumnWidth(80.0),
              3: FixedColumnWidth(80.0),
          },
          // 设置表格边框样式
          border: TableBorder.all(color: Colors.black38, width: 2.0, style: Border-Style.solid),
          children: const <TableRow>[
                // 添加第一行数据
                TableRow(
                  children: <Widget>[
                    Text('姓名'),
                    Text('性别'),
                    Text('年龄'),
                    Text('身高'),
                  ],
                ),
                // 添加第二行数据
                TableRow(
                  children: <Widget>[
                    Text('张三'),
                    Text('男'),
                    Text('26'),
                    Text('172'),
                  ],
                ),
                // 添加第三行数据
                TableRow(
                  children: <Widget>[
                    Text('李四'),
                    Text('男'),
                    Text('28'),
                    Text('178'),
                  ],
                ),
              ],
            ),
          ),
        );
      }
  }

上述示例代码的视图展现大致如图所示。
Flutter Table

酷客教程相关文章:

赞(0)

评论 抢沙发

评论前必须登录!