关注我们

Flutter - Table

Flutter还允许用户在移动应用程序中创建表格Table布局。无涯教程可以使用表格小部件在Flutter中创建一个表，该部件具有几个属性，可以增强或修改表布局。这些属性是：border，children，columnWidths，textDirection，textBaseline等。

要创建表格时，无涯教程必须使用以下内容:

首先，无涯教程需要在主体中添加一个Table小部件。
接下来，无涯教程必须在表格小部件中添加TableRow。由于表格小部件具有多行。
最后，无涯教程需要在TableRow部件中添加TableCell。

复制代码

TableRow(children: [
  TableCell(child: Text('learnfk')),
  TableCell(
    child: Text('Flutter'),
  ),
  TableCell(child: Text('Android')),
  TableCell(child: Text('MySQL')),
]),

使用此小部件时，无涯教程必须知道这些规则:

该小部件自动确定列宽，该宽度在TableCells之间平均分配。
每行具有相同的高度，该高度将等于TableCell的最高高度。
表的子部件只能具有TableRow小部件。

让无涯教程借助下面给出的示例来理解它，无涯教程尝试覆盖与该小部件有关的所有事情：

链接：https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-table.html

来源：LearnFk无涯教程网

复制代码

import 'package:flutter/material.dart';

void main() {runApp(MyApp());}

class MyApp extends StatefulWidget {
  @override
  _TableExample createState() => _TableExample();
}

class _TableExample extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Table Example'),
          ),
          body: Center(
              child: Column(children: <Widget>[
                Container(
                  margin: EdgeInsets.all(20),
                  child: Table(
                    defaultColumnWidth: FixedColumnWidth(120.0),
                    border: TableBorder.all(
                        color: Colors.black,
                        style: BorderStyle.solid,
                        width: 2),
                    children: [
                      TableRow( children: [
                        Column(children:[Text('Website', style: TextStyle(fontSize: 20.0))]),
                        Column(children:[Text('Tutorial', style: TextStyle(fontSize: 20.0))]),
                        Column(children:[Text('Review', style: TextStyle(fontSize: 20.0))]),
                      ]),
                      TableRow( children: [
                        Column(children:[Text('Learnfk')]),
                        Column(children:[Text('Flutter')]),
                        Column(children:[Text('5*')]),
                      ]),
                      TableRow( children: [
                        Column(children:[Text('Learnfk')]),
                        Column(children:[Text('MySQL')]),
                        Column(children:[Text('5*')]),
                      ]),
                      TableRow( children: [
                        Column(children:[Text('Learnfk')]),
                        Column(children:[Text('ReactJS')]),
                        Column(children:[Text('5*')]),
                      ]),
                    ],
                  ),
                ),
              ])
          )),
    );
  }
}

当无涯教程在模拟器或设备中运行应用程序时，无涯教程将看到以下屏幕截图:

DataTable

DataTable小部件使用column和rows属性存储信息。 columns属性包含使用DataColumn数组的数据，rows属性包含使用DataRow数组的信息。 DataRow具有子属性单元，这些子属性单元采用DataCell的数组。 DataColumn具有一个将小部件作为值的子属性标签。无涯教程还可以在DataTable中提供Text，Image，Icon或任何其他小部件。

以下是DataTable的语法:

复制代码

DataTable(
  columns: [
    DataColumn(label: ),
    DataColumn(label: )),
  ],
  rows: [
    DataRow(cells: [
      DataCell( ),
      DataCell( ),
      ...
      DataCell( ),
    ]),
    DataRow(cells: [
      DataCell( ),
      DataCell( ),
      ...
      DataCell( ),
    ]),
  ],
),

示例

让无涯教程了解如何在Flutter应用程序中使用DataTable。在这里，无涯教程将定义一个简单的数据表，该表具有三列标签和四行：

复制代码

import 'package:flutter/material.dart';

void main() {runApp(MyApp());}

class MyApp extends StatefulWidget {
  @override
  _DataTableExample createState() => _DataTableExample();
}

class _DataTableExample extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('扑颤了DataTable. Example'),
          ),
          body: ListView(children: <Widget>[
            Center(
                child: Text(
                  'People-Chart',
                  style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                )),
            DataTable(
              columns: [
                DataColumn(label: Text(
                    'ID',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)
                )),
                DataColumn(label: Text(
                    'Name',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)
                )),
                DataColumn(label: Text(
                    'Profession',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)
                )),
              ],
              rows: [
                DataRow(cells: [
                  DataCell(Text('1')),
                  DataCell(Text('Stephen')),
                  DataCell(Text('Actor')),
                ]),
                DataRow(cells: [
                  DataCell(Text('5')),
                  DataCell(Text('Learnfk')),
                  DataCell(Text('Student')),
                ]),
                DataRow(cells: [
                  DataCell(Text('10')),
                  DataCell(Text('Harry')),
                  DataCell(Text('Leader')),
                ]),
                DataRow(cells: [
                  DataCell(Text('15')),
                  DataCell(Text('Peter')),
                  DataCell(Text('Scientist')),
                ]),
              ],
            ),
          ])
      ),
    );
  }
}