flutter表格組件Table和TableRow

這個組件在展現(xiàn)數(shù)據(jù)的時候常用到，可以設(shè)置的屬性并不難懂孟害，主要的難點在符合業(yè)務(wù)的寬度設(shè)置規(guī)則上。

先展示一段示例的代碼：

import 'package:flutter/material.dart';

class TableScreen extends StatefulWidget {
  TableScreen({Key key}) : super(key: key);

  @override
  _TableScreenState createState() => _TableScreenState();
}

class _TableScreenState extends State<TableScreen> {
  List<TableRow> _renderList() {
    List titleList = ['aaaaaaaa', 'bbbb', 'ccccccccc', 'ddd', 'ee'];
    List<TableRow> list = [];
    for (var i = 0; i < titleList.length; i++) {
      list.add(
        TableRow(
          children: [
            Container(
              padding: EdgeInsets.all(12),
              child: Text(titleList[i]),
            ),
            Container(
              padding: EdgeInsets.all(12),
              child: Text(i % 2 == 0 ? 'content' : 'contentcontentcontentcontentcontentcontentcontentcontent'),
            )
          ]
        )
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Table'),
      ),
      body: Container(
        margin: EdgeInsets.only(top: 40),
        color: Colors.black12,
        child: Table(
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          columnWidths: {
            0: IntrinsicColumnWidth(),
            1: FlexColumnWidth()
          },
          children: _renderList()
        ),
      ),
    );
  }
}

效果圖如下：

table.jpg

columnWidths這個屬性就是對應(yīng)寬度設(shè)置規(guī)則的挪拟，這個屬性對應(yīng)的值是一個Map類型纹坐，key是列的編號，從0開始舞丛，value是TableColumnWidth類型的耘子，flutter提供的有6個分別是：IntrinsicColumnWidth、FixedColumnWidth球切、FractionColumnWidth谷誓、FlexColumnWidth、MaxColumnWidth和MinColumnWidth吨凑。

IntrinsicColumnWidth代表那一列中以最長一行的寬度為那一列的寬度
FixedColumnWidth 固定一個寬度捍歪，需要傳一個值
FractionColumnWidth 指的是table的最大寬度的一個比例
FlexColumnWidth這個flex就很好理解了，和Flexible的用法沒有區(qū)別
MaxColumnWidth會傳進來兩個值鸵钝，取其中大值
MinColumnWidth會傳進來兩個值糙臼，取其中小值

defaultColumnWidth這個屬性就是在columnWidths沒有設(shè)置對應(yīng)列時，即columnWidths[i]是null時恩商，取defaultColumnWidth的值变逃，當(dāng)然defaultColumnWidth的值類型也是TableColumnWidth的。

textDirection這個屬性是文字的排列順序怠堪，不做贅述

border這個屬性是定義邊框的

TableCellVerticalAlignment這個是定義TableCell的垂直方向的布局的揽乱，默認是top，即頂部對齊粟矿。示例代碼我設(shè)置成middle, 才有的水平方向內(nèi)容居中凰棉。

textBaseline 這個是設(shè)置文本baseline對齊的時候需要的，值是枚舉類型陌粹，只有alphabetic(字母類型)和ideographic(表意文字類型)撒犀。

這個系列的文章是根據(jù)flutter 的 Widget of the week來做的，歡迎大家斧正。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者