注意：無特殊說明，Flutter版本及Dart版本如下：

目前成都創新互聯已為上千余家的企業提供了網站建設、域名、虛擬空間、網站托管、企業網站設計、蘭西網站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協力一起成長，共同發展。

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

DataTable

DataTable控件顯示表格數據，DataTable需要設置行和列，用法如下：

DataTable(
  columns: [
   DataColumn(label: Text('姓名')),
   DataColumn(label: Text('年齡')),
  ],
  rows: [
   DataRow(cells: [
    DataCell(Text('老孟')),
    DataCell(Text('18')),
   ]),

  ],
)

columns參數是DataTable的列，rows參數是DataTable的每一行數據，效果如下：


在添加一行數據，只需要添加一個DataRow即可，用法如下：

DataTable(
    ...
    rows: [
     DataRow(cells: [
      DataCell(Text('老孟')),
      DataCell(Text('18')),
     ]),
     DataRow(cells: [
      DataCell(Text('大黃')),
      DataCell(Text('20')),
     ]),
    ],
   )

在表頭顯示排序圖標：

DataTable(
  sortColumnIndex: 1,
  sortAscending: true,
  ...
  )

sortColumnIndex參數表示表格顯示排序圖標的索引，sortAscending參數表示升序或者降序，效果如下：

這里要注意DataTable本身不能對數據進行排序，這些參數僅僅是外觀上的控制。

DataColumn

默認情況下數據是左對齊的，讓某一列右對齊只需設置DataColumn中numeric參數true，設置如下：

 DataTable(
  columns: [
   DataColumn(label: Text('姓名')),
   DataColumn(label: Text('年齡'),numeric: true),
  ],
  ...
  )

效果：

設置DataColumn中tooltip參數表示當長安此表頭時顯示提示，用法如下：

DataColumn(label: Text('姓名'),tooltip: '長按提示')

長按提示：

onSort回調是用戶點擊表頭（DataColumn）時的回調，onSort中第一個參數columnIndex表示索引，ascending參數表示升序或者降序，用法如下：

DataColumn(label: Text('年齡'), onSort: (int columnIndex, bool ascending){
   //排序算法
}),

DataRow

可以顯示其中一行被選中，設置DataRow中selected參數為true，用法如下：

DataRow(
  selected: true,
  ...
)

效果如下：

onSelectChanged參數是點擊每一行數據時的回調，用法如下：

DataRow(
   onSelectChanged: (selected){
   }
   ...
)

設置了onSelectChanged參數，在數據的每一行和表頭的前面顯示勾選框，效果如下：

當然現在點擊還不能顯示選中的效果，增加選中效果，修改User model類，增加selected屬性，表示當前行是否選中：

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

  String name;
  int age;
  bool selected;
}

修改數據：

List<User> data = [
  User('老孟', 18),
  User('老孟1', 19,selected: true),
  User('老孟2', 20),
  User('老孟3', 21),
  User('老孟4', 22),
];

構建DataTable：

List<DataRow> dateRows = [];
   for (int i = 0; i < data.length; i++) {
    dateRows.add(DataRow(
     selected: data[i].selected,
     onSelectChanged: (selected){
      setState(() {
       data[i].selected = selected;
      });
     },
     cells: [
      DataCell(Text('${data[i].name}')),
      DataCell(Text('${data[i].age}')),
     ],
    ));
   }
   return DataTable(columns: [
    DataColumn(label: Text('姓名')),
    DataColumn(
     label: Text('年齡'),
    ),
   ], rows: dateRows);

效果如下：

我們并沒有對表頭的全選/取消全選勾選框進行控制，一個很大的疑問：點擊全選/取消全選勾選框，如果都勾選了，真實數據是否也發生變化了，對應本示例就是User中的selected參數是否全部為true，可以肯定的告訴你User中的selected參數已經全部變為true了，那是如何實現的呢？非常簡單，每一行的onSelectChanged都被回調了一次。

DataCell

DataCell是DataRow中每一個子控件，DataCell子控件不一定是文本，也可以是圖標等任意組件，我們可以給DataCell設置編輯圖標：

DataCell(Text('name'),showEditIcon: true)

效果如下：

當然僅僅是一個圖標，placeholder參數也是一樣的，設置為true，僅僅是文字的樣式變化了，onTap為點擊回調，用法如下：

DataCell(Text('name'),showEditIcon: true,onTap: (){
  print('DataCell onTap');
},placeholder: true)

效果如下：

排序

DateTable本身是沒有排序功能的，當用戶點擊表頭時對數據按照本列數據進行排序，用法如下，

數據model類：

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

  final String name;
  final int age;
}

初始化數據及默認排序：

List<User> data = [
  User('老孟', 18),
  User('老孟1', 19),
  User('老孟2', 20),
  User('老孟3', 21),
  User('老孟4', 22),
];

var _sortAscending = true;

構建DataTable：

DataTable(
   sortColumnIndex: 1,
   sortAscending: _sortAscending,
   columns: [
    DataColumn(label: Text('姓名')),
    DataColumn(label: Text('年齡'), onSort: (int columnIndex, bool ascending){
     setState(() {
      _sortAscending = ascending;
      if(ascending){
       data.sort((a, b) => a.age.compareTo(b.age));
      }else {
       data.sort((a, b) => b.age.compareTo(a.age));
      }
     });
    }),
   ],
   rows: data.map((user) {
    return DataRow(cells: [
     DataCell(Text('${user.name}')),
     DataCell(Text('${user.age}')),
    ]);
   }).toList())

效果如下：

如果想給姓名列也加上排序呢，修改如下：

var _sortAscending = true;
var _sortColumnIndex =0;
DataTable(
     sortColumnIndex: _sortColumnIndex,
     sortAscending: _sortAscending,
     columns: [
      DataColumn(label: Text('姓名'),onSort: (int columnIndex, bool ascending){
       setState(() {
        _sortColumnIndex = columnIndex;
        _sortAscending = ascending;
        if(ascending){
         data.sort((a, b) => a.name.compareTo(b.name));
        }else {
         data.sort((a, b) => b.name.compareTo(a.name));
        }
       });
      }),
      DataColumn(label: Text('年齡'), onSort: (int columnIndex, bool ascending){
       setState(() {
        _sortColumnIndex = columnIndex;
        _sortAscending = ascending;
        if(ascending){
         data.sort((a, b) => a.age.compareTo(b.age));
        }else {
         data.sort((a, b) => b.age.compareTo(a.age));
        }
       });
      }),
     ],
     ...
)

效果如下：

處理數據顯示不全問題

當表格列比較多的時候，可以使用SingleChildScrollView包裹DataTable，顯示不全時滾動顯示，用法如下：

List<DataRow> dateRows = [];
for (int i = 0; i < data.length; i++) {
  dateRows.add(DataRow(
   cells: [
    DataCell(Text('${data[i].name}')),
    DataCell(Text('${data[i].age}')),
    DataCell(Text('男')),
    DataCell(Text('2020')),
    DataCell(Text('10')),
   ],
  ));
}
return SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: DataTable(columns: [
   DataColumn(label: Text('姓名')),
   DataColumn(
    label: Text('年齡'),
   ),
   DataColumn(
    label: Text('性別'),
   ),
   DataColumn(
    label: Text('出生年份'),
   ),
   DataColumn(
    label: Text('出生月份'),
   ),
  ], rows: dateRows),
);

效果如下：

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

文章標題：FlutterDataTable的用法-創新互聯
當前網址：http://vcdvsql.cn/article38/cscepp.html

成都網站建設公司_創新互聯，為您提供小程序開發、Google、全網營銷推廣、外貿網站建設、微信小程序、營銷型網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯