flutter - 如何使用flutter设置宽度并使数据表中的行彼此靠近

Question

我正在尝试创建如下屏幕:

所以我在这里使用了DataTable作为以下代码:

import 'package:flutter/material.dart';
import 'package:catest/config/app_theme.dart';
import '../widgets/radio_btn_sim.dart';

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          SingleChildScrollView(
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.only(
                    top: 100,
                    left: 20,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Sim information',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(
                          left: 30,
                        ),
                        child: DataTable(
                          columns: [
                            DataColumn(label: Text('Sim operator')),
                            DataColumn(
                                label: Row(
                              children: <Widget>[
                                Text('Vodafone'),
                                Image.asset(
                                  'assets/images/vodic.png',
                                  width: 30,
                                  height: 30,
                                )
                              ],
                            )),
                          ],
                          rows: [
                            DataRow(cells: [
                              DataCell(Row(
                                children: <Widget>[
                                  Image.asset(
                                    'assets/images/sim_ic.png',
                                    width: 30,
                                    height: 30,
                                  ),
                                  Text('ICCID'),
                                ],
                              )),
                              DataCell(Text('123456789')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('IMEI')),
                              DataCell(Text('123456789')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('SIM IMSI')),
                              DataCell(Text('123456789')),
                            ]),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                //Network provider
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20,
                    left: 20,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Network Provider',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(
                          left: 30,
                        ),
                        child: DataTable(
                          columns: [
                            DataColumn(label: Text('Operator')),
                            DataColumn(
                                label: Row(
                              children: <Widget>[
                                Text('Vodafone NL'),
                                Image.asset(
                                  'assets/images/vodic.png',
                                  width: 30,
                                  height: 30,
                                )
                              ],
                            )),
                          ],
                          rows: [
                            DataRow(cells: [
                              DataCell(Row(
                                children: <Widget>[
                                  Text('MCC'),
                                ],
                              )),
                              DataCell(Text('204')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('MNC')),
                              DataCell(Text('04')),
                            ]),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
                //Serving Cell
                Padding(
                  padding: const EdgeInsets.only(
                    top: 20,
                    left: 20,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Serving Cell',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(
                          left: 30,
                        ),
                        child: DataTable(
                          columns: [
                            DataColumn(label: Text('Data Net')),
                            DataColumn(
                                label: Row(
                              children: <Widget>[
                                Text('LTE'),
                              ],
                            )),
                          ],
                          rows: [
                            DataRow(cells: [
                              DataCell(Row(
                                children: <Widget>[
                                  Text('Data type'),
                                ],
                              )),
                              DataCell(Text('LTE')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('TAC')),
                              DataCell(Text('62603')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('PCI')),
                              DataCell(Text('118')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('ECI')),
                              DataCell(Text('12315644(5465-567)')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('EARFCN')),
                              DataCell(Text('1300/19300')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('EARFCN')),
                              DataCell(Text('1300/19300')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('FREQ')),
                              DataCell(Text('1815/1720')),
                            ]),
                            DataRow(cells: [
                              DataCell(Text('BAND')),
                              DataCell(Text('3 FDD')),
                            ]),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Positioned(
            bottom: 0,
            child: SizedBox(
              width: MediaQuery.of(context).size.width,
              child: RadioBtnSim(
              ),
            ),
          ),
        ],
      ),
    );
  }
}

结果如下图所示:

所以我看到文本输出在中间是不同的，但是我需要在开头和结尾，第二点是每行之间都有间距，我需要在这里减少间距，而且我在这里看到长文本时也看到一些填充...
那我该怎么解决..

Answer 1

尝试将您的小部件包装在Align小部件中，该标签为您提供alignment参数，以便更好地对齐子小部件。