(十四)Flutter dataTable 数据表格的的使用

简单使用

import 'package:flutter/material.dart';
import '../model/post.dart';
class DataTableDemo extends StatefulWidget {
  @override
  _DataTableDemoState createState() => _DataTableDemoState();
}

class _DataTableDemoState extends State<DataTableDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DataTableDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            DataTable(columns: [
              DataColumn(label: Text("Title")),
              DataColumn(label: Text('Anthor')),
            ], rows: [
              DataRow(cells: [
                DataCell(Text("hello ~")),
                DataCell(Text("liuan")),
              ]),
              DataRow(cells: [
                DataCell(Text("hi~")),
                DataCell(Text("futao")),
              ]),
              DataRow(cells: [
                DataCell(Text("a ~")),
                DataCell(Text("zuguo")),
              ]),
            ]),
          ],
        ),
      ),
    );
  }
}

读取列表数据

import 'package:flutter/material.dart';
import '../model/post.dart';

class DataTableDemo extends StatefulWidget {
  @override
  _DataTableDemoState createState() => _DataTableDemoState();
}

class _DataTableDemoState extends State<DataTableDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DataTableDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            DataTable(columns: [
              DataColumn(label: Text("Title")),
              DataColumn(label: Text('Anthor')),
              DataColumn(label: Text('Image')),
            ], rows: posts.map(
              (post){
                return DataRow(
                  cells: [
                    DataCell(Text(post.title)),
                    DataCell(Text(post.author)),
                    DataCell(Image.network(post.imgeUrl)),
                  ]
                );
              }
            ).toList()
            
            ),
          ],
        ),
      ),
    );
  }
}

post.dart

class Post {
  const Post({
    this.title,
    this.author,
    this.imgeUrl,
    this.description,
  });
  final String title;
  final String author;
  final String imgeUrl;
  final String description;
}

final List<Post> posts = [
  Post(
    title: '天天练123141',
    author: 'Mohamed Chahin1',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '1',
  ),
  Post(
    title: '天天练',
    author: 'Mohamed Chahin',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '2',
  ),
  Post(
    title: '天天练4124',
    author: 'Mohamed Chahin',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '2',
  ),
  Post(
    title: '天天练123',
    author: 'Mohamed Chahin',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '2',
  ),
  Post(
    title: '天天练123',
    author: 'Mohamed Chahin',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '2',
  ),
  Post(
    title: '天天练12',
    author: 'Mohamed Chahin',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '2',
  )
];

数据表格的排序

import 'package:flutter/material.dart';
import '../model/post.dart';

class DataTableDemo extends StatefulWidget {
  @override
  _DataTableDemoState createState() => _DataTableDemoState();
}

class _DataTableDemoState extends State<DataTableDemo> {
  int _sortColumnIndex = 0;
  bool _sortAscending = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DataTableDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            DataTable(
                // 排序的列 0的话就是第一列
                sortColumnIndex: _sortColumnIndex,
                //true 升序 false 降序
                sortAscending: _sortAscending,
                columns: [
                  DataColumn(
                      label: Text("Title"),
                      onSort: (int index, bool ascending) {
                        setState(() {
                          _sortColumnIndex = index;
                          _sortAscending = ascending;
                          posts.sort(
                            (a,b){
                              if(!ascending){
                                final c=a;
                                a=b;
                                b=c;
                              }
                              // 按照标题内容的长度排序
                              return a.title.length.compareTo(b.title.length);
                            }
                          );
                        });
                      }),
                  DataColumn(label: Text('Anthor')),
                  DataColumn(label: Text('Image')),
                ],
                rows: posts.map((post) {
                  return DataRow(cells: [
                    DataCell(Text(post.title)),
                    DataCell(Text(post.author)),
                    DataCell(Image.network(post.imgeUrl)),
                  ]);
                }).toList()),
          ],
        ),
      ),
    );
  }
}

 选择数据表格行

import 'package:flutter/material.dart';
import '../model/post.dart';

class DataTableDemo extends StatefulWidget {
  @override
  _DataTableDemoState createState() => _DataTableDemoState();
}

class _DataTableDemoState extends State<DataTableDemo> {
  int _sortColumnIndex = 0;
  bool _sortAscending = true;
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DataTableDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            DataTable(
                // 排序的列 0的话就是第一列
                sortColumnIndex: _sortColumnIndex,
                //true 升序 false 降序
                sortAscending: _sortAscending,
                
   
                columns: [
                  DataColumn(
                      label: Text("Title"),
                      onSort: (int index, bool ascending) {
                        setState(() {
                          _sortColumnIndex = index;
                          _sortAscending = ascending;
                          posts.sort((a, b) {
                            if (!ascending) {
                              final c = a;
                              a = b;
                              b = c;
                            }
                            // 按照标题内容的长度排序
                            return a.title.length.compareTo(b.title.length);
                          });
                        });
                      }),
                  DataColumn(label: Text('Anthor')),
                  DataColumn(label: Text('Image')),
                ],
                rows: posts.map((post) {
                  return DataRow(
                      selected: post.selected,
                      onSelectChanged: (bool value) {
                        setState(() {
                          if (post.selected != value) {
                            post.selected = value;
                          }
                        });
                      },
                      cells: [
                        DataCell(Text(post.title)),
                        DataCell(Text(post.author)),
                        DataCell(Image.network(post.imgeUrl)),
                      ]);
                }).toList()),
          ],
        ),
      ),
    );
  }
}

post.dart

class Post {
   Post({
    this.title,
    this.author,
    this.imgeUrl,
    this.description,
  });
  final String title;
  final String author;
  final String imgeUrl;
  final String description;
    bool selected =false;

}

final List<Post> posts = [
  Post(
    title: '天天练123141',
    author: 'Mohamed Chahin1',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '1',
  ),
  Post(
    title: '天天练',
    author: 'Mohamed Chahin',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '2',
  ),
  Post(
    title: '天天练4124',
    author: 'Mohamed Chahin',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '2',
  ),
  Post(
    title: '天天练123',
    author: 'Mohamed Chahin',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '2',
  ),
  Post(
    title: '天天练123',
    author: 'Mohamed Chahin',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '2',
  ),
  Post(
    title: '天天练12',
    author: 'Mohamed Chahin',
    imgeUrl: 'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '2',
  )
];