如何在Flutter中放置DataTable列？

问题描述

我正在努力将这些列放置在我的数据表上，但无法弄清楚。这是当前工作代码的样子：

Container(
          color: Color(0xffF5F5F5),child: DataTable(
            headingRowHeight: 40,columns: [
              DataColumn(label: IconButton(
                splashColor: Colors.transparent,highlightColor: Colors.transparent,icon: Icon(Icons.remove_circle,color: Color(0xffB93E3E),),onpressed: () {
              // setState(() {
              // // _volume += 10;
              // });
             },)),DataColumn(label: Text('Text')),DataColumn(label: IconButton(
                splashColor: Colors.transparent,icon: Icon(Icons.menu,color: Color(0xff979797),tooltip: 'Hold and move up and down to sort.',onpressed: () {
                  // setState(() {
                  //   // _volume += 10;
                  // });
                },],rows: [
            ],Container(
          color: Color(0xffF5F5F5),columns: [
              DataColumn(
                  label: IconButton(
                    splashColor: Colors.transparent,icon: Icon(Icons.add_circle,color: Color(0xff58B93E),onpressed: () {
                  // setState(() {
                  // // _volume += 10;
                  // });
                },

这是我希望各栏所在的位置。如您所见，IconButton位于左侧，然后紧接文本，而Menu图标位于减号按钮行的末尾：

解决方法

使用简单的列和行。

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("your app")),body: Column(children: [
        Container(
          child: Row(
            children: [
              Padding(
                padding: const EdgeInsets.fromLTRB(20,15,10,15),child: Icon(
                  Icons.remove_circle,color: Colors.red,),Expanded(
                child: Text("your first text"),Padding(
                padding: const EdgeInsets.only(right: 20),child: Icon(Icons.menu),],Container(
          height: 1,color: Colors.grey,Row(
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(20,child: Icon(
                Icons.add_circle,color: Colors.green,Expanded(
              child: Text("your second text"),]),);
  }
}

使用数据表。我不知道您的需要，但是要使用数据表，有必要采取一种解决方法，然后将项目放在页眉中。不推荐这样做

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("your app")),body: SizedBox(
        width: double.infinity,child: DataTable(
            columns: const <DataColumn>[
              DataColumn(
                label: Icon(
                  Icons.remove_circle,DataColumn(
                label: Text(
                  'Your first text',DataColumn(
                label: Icon(Icons.menu),headingRowHeight: 40,rows: const <DataRow>[
              DataRow(
                cells: <DataCell>[
                  DataCell(Icon(
                    Icons.add_circle,)),DataCell(Text('your second text')),DataCell(Text(
                      "")),// you need 3 datacell because yopur have 3 headers
                ],);
  }
}