Flutter 初识：数据表格和卡片

最新推荐文章于 2024-08-28 09:07:59 发布
最新推荐文章于 2024-08-28 09:07:59 发布
阅读量1.6k 收藏 29
点赞数 25
分类专栏： Flutter 初识 文章标签： flutter javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang_6799/article/details/139377333
版权

Flutter数据表格和卡片小结

Table

Table 是 Flutter 中用于显示表格布局的小部件。它允许你定义行和列，并为每个单元格指定内容。

属性解析

Table({
    super.key,
    this.children = const <TableRow>[],
    this.columnWidths,
    this.defaultColumnWidth = const FlexColumnWidth(),
    this.textDirection,
    this.border,
    this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
    this.textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
  })
  • children (List): 表格的行列表，每一行由多个 TableCell 组成。
  • columnWidths (Map<int, TableColumnWidth>?): 每列的宽度，可以通过列索引指定不同的宽度类型。
  • defaultColumnWidth (TableColumnWidth): 默认的列宽，默认为 FlexColumnWidth()，即均匀分配空间。
  • textDirection (TextDirection?): 文本方向，用于处理文本对齐方式。
  • border (TableBorder?): 表格的边框样式。
  • defaultVerticalAlignment (TableCellVerticalAlignment): 单元格的垂直对齐方式，默认为 TableCellVerticalAlignment.top。
  • textBaseline (TextBaseline?): 基线对齐，用于确保文本基线在同一行内对齐。

示例

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Table Example'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Table(
              border: TableBorder.all(color: Colors.black),
              defaultColumnWidth: FixedColumnWidth(100.0),
              defaultVerticalAlignment: TableCellVerticalAlignment.middle,
              children: [
                TableRow(children: [
                  TableCell(child: Center(child: Text('Header 1'))),
                  TableCell(child: Center(child: Text('Header 2'))),
                  TableCell(child: Center(child: Text('Header 3'))),
                ]),
                TableRow(children: [
                  TableCell(child: Center(child: Text('Row 1 - Cell 1'))),
                  TableCell(child: Center(child: Text('Row 1 - Cell 2'))),
                  TableCell(child: Center(child: Text('Row 1 - Cell 3'))),
                ]),
                TableRow(children: [
                  TableCell(child: Center(child: Text('Row 2 - Cell 1'))),
                  TableCell(child: Center(child: Text('Row 2 - Cell 2'))),
                  TableCell(child: Center(child: Text('Row 2 - Cell 3'))),
                ]),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述

TableRow

TableRow 是 Flutter 中用于定义 Table 的行的小部件。它包含了行的装饰和子小部件

属性解析
TableRow({ this.key, this.decoration, this.children = const <Widget>[]})
  • key (LocalKey?): 唯一标识符，用于在树中标识该行。
  • decoration (Decoration?): 行的装饰，如背景颜色、边框等。
  • children (List): 行中的单元格（即子小部件），默认为空列表。

TableCell

TableCell 是 Flutter 中用于定义 TableRow 中单元格的小部件。它包含了单元格的对齐方式和显示内容。

属性解析
const TableCell({
    super.key,
    this.verticalAlignment,
    required super.child,
  })
  • key (LocalKey?): 唯一标识符，用于在树中标识该单元格。
  • verticalAlignment (TableCellVerticalAlignment?): 单元格的垂直对齐方式，可以是 top、middle、bottom 或 baseline 等。
  • child (Widget): 单元格中显示的小部件，通常是一个文本小部件。

 
 

DataTable

DataTable 是 Flutter 中用于展示数据表格的小部件，通常用于显示大量结构化的数据。

属性解析

DataTable({
    super.key,
    required this.columns,
    this.sortColumnIndex,
    this.sortAscending = true,
    this.onSelectAll,
    this.decoration,
    this.dataRowColor,
    @Deprecated(
      'Migrate to use dataRowMinHeight and dataRowMaxHeight instead. '
      'This feature was deprecated after v3.7.0-5.0.pre.',
    )
    double? dataRowHeight,
    double? dataRowMinHeight,
    double? dataRowMaxHeight,
    this.dataTextStyle,
    this.headingRowColor,
    this.headingRowHeight,
    this.headingTextStyle,
    this.horizontalMargin,
    this.columnSpacing,
    this.showCheckboxColumn = true,
    this.showBottomBorder = false,
    this.dividerThickness,
    required this.rows,
    this.checkboxHorizontalMargin,
    this.border,
    this.clipBehavior = Clip.none,
  })
  • columns (List): 表头列的配置，每个 DataColumn 定义一列的标题和排序行为等。
  • sortColumnIndex (int?): 当前排序列的索引。
  • sortAscending (bool): 是否按升序排序，默认为 true。
  • onSelectAll (Function(bool?)?): “全选” 复选框的回调。
  • decoration (Decoration?): 表格的装饰，如背景颜色、边框等。
  • dataRowColor (MaterialStateProperty<Color?>?): 数据行的背景颜色。
  • dataRowMinHeight (double?): 数据行的最小高度。
  • dataRowMaxHeight (double?): 数据行的最大高度。
  • dataTextStyle (TextStyle?): 数据单元格的文本样式。
  • headingRowColor (MaterialStateProperty<Color?>?): 表头行的背景颜色。
  • headingRowHeight (double?): 表头行的高度。
  • headingTextStyle (TextStyle?): 表头单元格的文本样式。
  • horizontalMargin (double?): 表格水平方向上的间距。
  • columnSpacing (double?): 列之间的间距。
  • showCheckboxColumn (bool): 是否显示选择框列，默认为 true。
  • showBottomBorder (bool): 是否显示底部边框，默认为 false。
  • dividerThickness (double?): 分隔线的厚度。
  • rows (List): 数据行的配置，每个 DataRow 包含多个 DataCell。
  • checkboxHorizontalMargin (double?): 复选框的水平间距。
  • border (TableBorder?): 表格的边框样式。
  • clipBehavior (Clip): 设置裁剪行为，默认为 Clip.none。

示例

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _sortAscending = true;
  int? _sortColumnIndex;

  List<User> _users = [
    User('Alice', 25),
    User('Bob', 30),
    User('Charlie', 35),
  ];

  void _sort<T>(Comparable<T> Function(User user) getField, int columnIndex,
      bool ascending) {
    _users.sort((a, b) {
      if (!ascending) {
        final User c = a;
        a = b;
        b = c;
      }
      final Comparable<T> aValue = getField(a);
      final Comparable<T> bValue = getField(b);
      return Comparable.compare(aValue, bValue);
    });
    setState(() {
      _sortColumnIndex = columnIndex;
      _sortAscending = ascending;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('DataTable Example'),
        ),
        body: SingleChildScrollView(
          child: DataTable(
            sortColumnIndex: _sortColumnIndex,
            sortAscending: _sortAscending,
            columns: [
              DataColumn(
                label: Text('Name'),
                onSort: (int columnIndex, bool ascending) => _sort<String>(
                    (User user) => user.name, columnIndex, ascending),
              ),
              DataColumn(
                label: Text('Age'),
                numeric: true,
                onSort: (int columnIndex, bool ascending) =>
                    _sort<num>((User user) => user.age, columnIndex, ascending),
              ),
            ],
            rows: _users.map((User user) {
              return DataRow(cells: [
                DataCell(Text(user.name)),
                DataCell(Text('${user.age}')),
              ]);
            }).toList(),
          ),
        ),
      ),
    );
  }
}

class User {
  User(this.name, this.age);

  final String name;
  final int age;
}

在这里插入图片描述

DataColumn

DataColumn 是 Flutter 中用于定义 DataTable 表头列的小部件。它包含了列的标题、提示信息、是否为数字列以及排序等功能。

属性解析
const DataColumn({
    required this.label,
    this.tooltip,
    this.numeric = false,
    this.onSort,
    this.mouseCursor,
  })
  • label (Widget): 用于显示列标题的小部件，通常是一个文本小部件。
  • tooltip (String?): 当用户长按列标题时显示的提示信息。
  • numeric (bool): 指定该列是否为数字列，默认为 false。
  • onSort (Function(int columnIndex, bool ascending)?): 排序回调函数，当用户点击列标题时调用，用于处理数据的排序逻辑。
  • mouseCursor (MouseCursor?): 鼠标悬停在列标题上时显示的光标样式。
示例
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _sortAscending = true;
  int? _sortColumnIndex;

  List<User> _users = [
    User('Alice', 25),
    User('Bob', 30),
    User('Charlie', 35),
  ];

  void _sort<T>(Comparable<T> Function(User user) getField, int columnIndex, bool ascending) {
    _users.sort((a, b) {
      if (!ascending) {
        final User c = a;
        a = b;
        b = c;
      }
      final Comparable<T> aValue = getField(a);
      final Comparable<T> bValue = getField(b);
      return Comparable.compare(aValue, bValue);
    });
    setState(() {
      _sortColumnIndex = columnIndex;
      _sortAscending = ascending;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('DataTable Example'),
        ),
        body: SingleChildScrollView(
          child: DataTable(
            sortColumnIndex: _sortColumnIndex,
            sortAscending: _sortAscending,
            columns: [
              DataColumn(
                label: Text('Name'),
                tooltip: 'User\'s name',
                onSort: (int columnIndex, bool ascending) => _sort<String>((User user) => user.name, columnIndex, ascending),
              ),
              DataColumn(
                label: Text('Age'),
                numeric: true,
                tooltip: 'User\'s age',
                onSort: (int columnIndex, bool ascending) => _sort<num>((User user) => user.age, columnIndex, ascending),
              ),
            ],
            rows: _users.map((User user) {
              return DataRow(cells: [
                DataCell(Text(user.name)),
                DataCell(Text('${user.age}')),
              ]);
            }).toList(),
          ),
        ),
      ),
    );
  }
}

class User {
  User(this.name, this.age);

  final String name;
  final int age;
}

DataRow

DataRow 是 Flutter 中用于定义 DataTable 表格中的一行。它包含了行的单元格、选择状态、长按事件等功能。

属性解析
const DataRow({
    this.key,
    this.selected = false,
    this.onSelectChanged,
    this.onLongPress,
    this.color,
    this.mouseCursor,
    required this.cells,
  })
  • key (LocalKey?): 唯一标识符，用于在树中标识该行。
  • selected (bool): 指定该行是否被选中，默认为 false。
  • onSelectChanged (ValueChanged<bool?>?): 当用户点击行的复选框时调用的回调函数。
  • onLongPress (GestureLongPressCallback?): 当用户长按行时调用的回调函数。
  • color (MaterialStateProperty<Color?>?): 行的背景颜色。
  • mouseCursor (MouseCursor?): 鼠标悬停在行上时显示的光标样式。
  • cells (List): 行中的单元格列表，每个单元格由 DataCell 定义。
示例
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _sortAscending = true;
  int? _sortColumnIndex;

  List<User> _users = [
    User('Alice', 25),
    User('Bob', 30),
    User('Charlie', 35),
  ];

  void _sort<T>(Comparable<T> Function(User user) getField, int columnIndex, bool ascending) {
    _users.sort((a, b) {
      if (!ascending) {
        final User c = a;
        a = b;
        b = c;
      }
      final Comparable<T> aValue = getField(a);
      final Comparable<T> bValue = getField(b);
      return Comparable.compare(aValue, bValue);
    });
    setState(() {
      _sortColumnIndex = columnIndex;
      _sortAscending = ascending;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('DataTable Example'),
        ),
        body: SingleChildScrollView(
          child: DataTable(
            sortColumnIndex: _sortColumnIndex,
            sortAscending: _sortAscending,
            columns: [
              DataColumn(
                label: Text('Name'),
                tooltip: 'User\'s name',
                onSort: (int columnIndex, bool ascending) => _sort<String>((User user) => user.name, columnIndex, ascending),
              ),
              DataColumn(
                label: Text('Age'),
                numeric: true,
                tooltip: 'User\'s age',
                onSort: (int columnIndex, bool ascending) => _sort<num>((User user) => user.age, columnIndex, ascending),
              ),
            ],
            rows: _users.map((User user) {
              return DataRow(
                selected: user.selected,
                onSelectChanged: (bool? value) {
                  setState(() {
                    user.selected = value ?? false;
                  });
                },
                cells: [
                  DataCell(Text(user.name)),
                  DataCell(Text('${user.age}')),
                ],
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

class User {
  User(this.name, this.age, {this.selected = false});

  final String name;
  final int age;
  bool selected;
}

DataCell

DataCell 是 Flutter 中用于定义 DataRow 中单元格的小部件。它包含了单元格的显示内容、占位符状态、编辑图标以及各种手势事件。

属性解析
const DataCell(
    this.child, {
    this.placeholder = false,
    this.showEditIcon = false,
    this.onTap,
    this.onLongPress,
    this.onTapDown,
    this.onDoubleTap,
    this.onTapCancel,
  })
  • child (Widget): 单元格中显示的小部件，通常是一个文本小部件。
  • placeholder (bool): 指定该单元格是否为占位符，默认为 false。
  • showEditIcon (bool): 是否显示编辑图标，默认为 false。
  • onTap (GestureTapCallback?): 当用户点击单元格时调用的回调函数。
  • onLongPress (GestureLongPressCallback?): 当用户长按单元格时调用的回调函数。
  • onTapDown (GestureTapDownCallback?): 当用户按下单元格时调用的回调函数。
  • onDoubleTap (GestureDoubleTapCallback?): 当用户双击单元格时调用的回调函数。
  • onTapCancel (GestureTapCancelCallback?): 当单元格点击操作被取消时调用的回调函数。

 
 

Card

Card 是 Flutter 中用于创建卡片样式小部件的容器，它通常用于在应用中展示信息块。

属性解析

  const Card({
    super.key,
    this.color,
    this.shadowColor,
    this.surfaceTintColor,
    this.elevation,
    this.shape,
    this.borderOnForeground = true,
    this.margin,
    this.clipBehavior,
    this.child,
    this.semanticContainer = true,
  })
  • color (Color?): 卡片的背景颜色。
  • shadowColor (Color?): 卡片阴影的颜色。
  • surfaceTintColor (Color?): 卡片表面色调颜色。
  • elevation (double?): 卡片的阴影高度。
  • shape (ShapeBorder?): 卡片的形状及边框样式。
  • borderOnForeground (bool): 控制边框是在前景绘制还是背景绘制，默认值为 true。
  • margin (EdgeInsetsGeometry?): 卡片外边距，默认为 EdgeInsets.all(4.0)。
  • clipBehavior (Clip?): 设置裁剪行为。
  • child (Widget?): 卡片的子小部件。
  • semanticContainer (bool): 是否将卡片作为语义容器，默认为 true。

示例

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card Example'),
        ),
        body: Center(
          child: Card(
            color: Colors.white,
            shadowColor: Colors.grey,
            elevation: 8.0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15.0),
            ),
            margin: EdgeInsets.all(16.0),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ListTile(
                    leading: Icon(Icons.album, size: 50),
                    title: Text('Card Title', style: TextStyle(fontSize: 24)),
                    subtitle:
                        Text('Card Subtitle', style: TextStyle(fontSize: 16)),
                  ),
                  ButtonBar(
                    children: <Widget>[
                      TextButton(
                        child: Text('ACTION 1'),
                        onPressed: () {
                          // Handle the action here
                        },
                      ),
                      TextButton(
                        child: Text('ACTION 2'),
                        onPressed: () {
                          // Handle the action here
                        },
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这里插入图片描述
 
 

数星星的磊
关注
专栏目录
Flutter Table 表格
10-26
Flutter Table 表格。
Flutter 中的 Table 小部件：全面指南
smileKH的博客
06-04 1879
Table您可以使用TextStyle和来自定义单元格的文本样式和背景。
探索 Flutter 的可编辑表格神器：Editable
最新发布
gitblog_00149的博客
08-28 357
探索 Flutter 的可编辑表格神器：Editable editableThis library allows you to create editable tables and spreadsheets with ease, either by providing initial row and column count to display an empty table or use it...
【Flutter】【widget】Table 表格widget
自动人生博客
11-21 1700
Table 表格widget，其实很少使用到的，等有需要的时候在查看该widget欢迎关注，留言，咨询，交流！
Flutter——最详细(Table)网格、表格组件使用教程
人生在世
07-10 2021
用于展示表格组件，可指定线宽、列宽、文字方向等属性。
Flutter开发之——Table
我的博客
04-22 1955
一 概述 Table用于创建表格试图组件 一个完整的表格包含：Table(表格)，TableRow(一行)，TableCell(单元格)组成 二 表格的三要素(Table/TableRow/TableCell) 2.1 Table 构造函数 Table({ Key? key, this.children = const <TableRow>[], this.columnWidths, this.defaultColumnWidth = const FlexC
Flutter DataTable 看这一篇就够了
热门推荐
老孟Flutter
03-04 1万+
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 DataTable DataTable控件显示表格数据，DataTable需要设置行和列，用法如下： DataTable( columns: [ DataColumn(label: Text('姓名')), DataColumn...
Flutter 项目：flutter的安装和环境配置
03-10
- 选择`Flutter: New Project`。 - VS Code将提示您定位或下载Flutter SDK。 - 如果已安装Flutter SDK，则选择`Locate SDK`；若未安装，则选择`Download SDK`。 - 如果未安装Git for Windows，点击相关按钮会...
Flutter网络请求：驾驭数据的力量
07-10
Flutter是一个由Google开发的开源移动UI框架，用于构建高效、高性能的iOS和Android应用程序。Flutter使用Dart语言作为开发语言，这是一门简洁、强类型、并且专为客户端应用性能设计的编程语言。 ### Flutter的主要...
flutterapp：学习Flutter和Dart的起点
02-18
通过Flutterapp项目，初学者可以逐步掌握如何搭建Flutter环境，编写第一个Hello World程序，理解Widget树的构建，以及如何处理用户交互和数据流。同时，学习Dart语言的语法特性和面向对象编程的概念。随着项目的深入...
Flutter:手势和交互控件
08-13
Flutter常用的手势和交互控件
掌握Flutter导航：页面路由的艺术与实践
07-10
Flutter是一个由Google开发的开源移动UI框架，用于构建高效、高性能的iOS和Android应用程序。Flutter使用Dart语言作为开发语言，这是一门简洁、强类型、并且专为客户端应用性能设计的编程语言。 ### Flutter的主要...
Flutter纯手工绘制定制表格控件Table
许天成的博客
03-10 928
手把手用flutter绘制定制化表格。
这一篇让你搞定 Flutter 的数据表格
Flutter 跨平台技术研究
11-25 2013
墙裂推荐！使用 DataTable 搞定基础数据表格，使用 SfDataGrid 几乎能满足所有复杂表格的开发。
Flutter 中的 DataTable 小部件：全面指南
smileKH的博客
05-14 947
你可以通过设置不同的属性来定制DataTableDataTable(// ...DataTable是一个在需要展示复杂数据集时非常有用的组件。它不仅提供了必要的布局功能，还允许你根据应用的风格进行定制。使用DataTable可以创建出既美观又实用的数据表格，同时保持了Material Design的一致性。记住，设计时应考虑用户的交互体验，确保表格数据的可读性和易用性。通过上述示例，你应该能够理解如何在Flutter应用中使用DataTable，并且可以根据你的需求进行自定义。
Flutter 布局（九）- Flow、Table、Wrap详解
金戈鐡馬
03-04 1303
Flow官方介绍是一个对child尺寸以及位置调整非常高效的控件，主要是得益于其FlowDelegate。另外Flow在用转换矩阵（transformation matrices）对child进行位置调整的时候进行了优化。Flow以及其child的一些约束都会受到FlowDelegate的控制。本文主要介绍Flutter布局中的Flow、Table、Wrap控件，详细介绍了其布局行为以及使用场景，并对源码进行了分析。
Flutter学习记录——12.表格组件
赈川
12-04 2509
文章目录1.Table Widget2.DataTable Widget3.PaginatedDataTable Widget4.总结 1.Table Widget 我们先看下表格绘制的第一种实现组件：Table。Table 的继承关系： Table -> RenderObjectWidget -> Widget Table 中的每一行用 TableRow 组件，列数用 columnW...
Flutter 组件之 Table
Tools_are的博客
02-15 980
表格组件。
Flutter StatefulWidget：状态组件与数据绑定
通过组合无状态和有状态组件，我们可以设计出响应用户操作、维护数据状态的高效应用，充分利用Flutter的组件化开发理念。同时，熟悉Material UI组件库和基本布局结构，有助于快速构建美观且功能丰富的Flutter应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值