如何在 Flutter 中定位 DataTable 列？

Question

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

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,
                highlightColor: 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),
          child: DataTable(
            headingRowHeight: 40,
            columns: [
              DataColumn(
                  label: IconButton(
                    splashColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    icon: Icon(Icons.add_circle, color: Color(0xff58B93E),),
                onPressed: () {
                  // setState(() {
                  // // _volume += 10;
                  // });
                },
              )),
              DataColumn(label: Text('Text')),
            ],
            rows: [
            ],
          ),
        ),

这是我希望列所在的位置。如您所见，IconButton 位于左侧，文本紧随其后，菜单图标位于减号按钮行的末尾：

Answer 1

使用简单的列和行。

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, 15, 10, 15),
              child: Icon(
                Icons.add_circle,
                color: Colors.green,
              ),
            ),
            Expanded(
              child: Text("your second text"),
            ),
          ],
        ),
        Container(
          height: 1,
          color: Colors.grey,
        ),
      ]),
    );
  }
}

使用数据表。我不知道您的需要，但要使用数据表，有必要制定一个解决方法并将项目放在 header 中。不强烈推荐

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,
                  color: Colors.red,
                ),
              ),
              DataColumn(
                label: Text(
                  'Your first text',
                ),
              ),
              DataColumn(
                label: Icon(Icons.menu),
              ),
            ],
            headingRowHeight: 40,
            rows: const <DataRow>[
              DataRow(
                cells: <DataCell>[
                  DataCell(Icon(
                    Icons.add_circle,
                    color: Colors.green,
                  )),
                  DataCell(Text('your second text')),
                  DataCell(Text(
                      "")), // you need 3 datacell because yopur have 3 headers
                ],
              ),
            ]),
      ),
    );
  }
}

如何在 Flutter 中定位 DataTable 列？

How to position DataTable columns in Flutter?

datatable

position

alignment

datacolumn

flutter