flutter 使用内置函数中的DataTable排序进行抖动

t98cgbkg  于 2022-12-27  发布在  Flutter
关注(0)|答案(2)|浏览(142)

如何使用DataTable上的内置函数对列进行排序?是否可以对多列进行排序,以便当我按下排序图标时,它实际上对列表进行排序?
感谢您的支持:)

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    var myColumns = [
      new DataColumn(label: new Text('name')),
      new DataColumn(label: new Text('age')),
      new DataColumn(label: new Text('Hight')),
    ];

    var myRows = [
      new DataRow(cells: [
        new DataCell(new Text('George')),
        new DataCell(new Text('18')),
        new DataCell(new Text('173cm')),
      ]),
      new DataRow(cells: [
        new DataCell(new Text('Dave')),
        new DataCell(new Text('21')),
        new DataCell(new Text('183cm')),
      ]),
      new DataRow(cells: [
        new DataCell(new Text('Sam')),
        new DataCell(new Text('55')),
        new DataCell(new Text('170cm')),
      ])
    ];

    return new Scaffold(
      body: new Center(
        child: new Container(
            child: new DataTable(
          columns: myColumns,
          rows: myRows,
          sortColumnIndex: 0,
          sortAscending: true,
        )),
      ),
    );
  }
}

mv1qrgav

mv1qrgav1#

我做了一些小版本,以帮助那些可能面临一些问题。

class Person {
  String name;
  int age;
  num hight;
  Person({this.name, this.age, this hight});
}

class HomePageState extends State<HomePage> {
  bool _sortNameAsc = true;
  bool _sortAgeAsc = true;
  bool _sortHightAsc = true;
  bool _sortAsc = true;
  int _sortColumnIndex;
  List<Person> _persons;

  @override
  initState() {
    super.initState();
    _persons = [
      Person(
        name: 'George',
        age: 18,
        height: 173,
      ),
      Person(
        name: 'Dave',
        age: 21,
        height: 183,
      ),
      Person(
        name: 'Sam',
        age: 55,
        height: 170,
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    var myColumns = [
      DataColumn(
        label:  Text('name'),
        onSort: (columnIndex, sortAscending) {
          setState(() {
            if (columnIndex == _sortColumnIndex) {
              _sortAsc = _sortNameAsc = sortAscending;
            } else {
              _sortColumnIndex = columnIndex;
              _sortAsc = _sortNameAsc;
            }
            _persons.sort((a, b) => a.name.compareTo(b.name));
            if (!_sortAsc) {
              _persons = _persons.reversed.toList();
            }
          });
        },
       ),
      DataColumn(
        label:  Text('age'),
        onSort: (columnIndex, sortAscending) {
          setState(() {
            if (columnIndex == _sortColumnIndex) {
              _sortAsc = _sortAgeAsc = sortAscending;
            } else {
              _sortColumnIndex = columnIndex;
              _sortAsc = _sortAgeAsc;
            }
            _persons.sort((a, b) => a.age.compareTo(b.age));
            if (!_sortAscending) {
              _persons = _persons.reversed.toList();
            }
          });
        },
      ),
      DataColumn(
        label:  Text('Hight'),
        onSort: (columnIndex, sortAscending) {
          setState(() {
            if (columnIndex == _sortColumnIndex) {
              _sortAsc = _sortHeightAsc = sortAscending;
            } else {
              _sortColumnIndex = columnIndex;
              _sortAsc = _sortHeightAsc;
            }
            _persons.sort((a, b) => a.height.compareTo(b.height));
            if (!_sortAscending) {
              _persons = _persons.reversed.toList();
            }
          });
        },
      ),
    ];

    var myRows = _persons.map((person) {
      return DataRow(cells: [
         DataCell( Text(person.name)),
         DataCell( Text('${person.age}')),
         DataCell( Text('${person.height}cm')),
      ]);
    });

    return  Scaffold(
      body:  Center(
        child:  Container(
            child:  DataTable(
          columns: myColumns,
          rows: myRows.toList(),
          sortColumnIndex: _sortColumnIndex,
          sortAscending: _sortAsc,
        )),
      ),
    );
  }
}
2q5ifsrm

2q5ifsrm2#

我建议你用一种简单的方法来做。假设有一个名为StudentDetails的类,属性为name,age,height.。创建一个具有不同值的该类对象的列表。

StudentDetails s1, s2, s3;
s1.name = George;
s1.age = 18;
s1.height = 173;
//ans same for the rest of two students .
List<dynamic> sd = [s1,s2,s3];

现在像这样将它传递给DataCell列表。

var myRows= [ ];
for(int i = 0 ; i<sd.length;i++)
{
myRows.add(DataCell(child:Text(sd[i].name);
myRows.add(DataCell(child:Text(sd[i].age);
myRows.add(DataCell(child:Text(sd[i].height);
}

现在当你必须排序表做这在排序图标按下

setState((){
sd.sort((a,b)=>a.name.compareTo(b.name));
});

相关问题