创建屏幕的最佳方法是在抖动中包含细节

Question

我正在尝试创建一个屏幕，如下图所示：

我尝试创建如下代码：

child: Scaffold(
          backgroundColor: AppTheme.nearlyWhite,
          body: SingleChildScrollView(
            child: SizedBox(
              height: MediaQuery.of(context).size.height,
              child: Column(
                children: [
                  Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(
                          top: 100,
                          left: 20,
                        ),
                        child: Column(
                          children: <Widget>[
                            SizedBox(
                              width: double.infinity,
                              child: Container(
                                child: Text(
                                  "Sim Information",
                                  style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold,
                                  ),
                                  textAlign: TextAlign.left,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Row(
                        children: [
                          Container(
                            padding: const EdgeInsets.only(
                              top: 16,
                              left: 50,
                            ),
                            child: const Text(
                              'Sim Operator',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 16,
                              ),
                            ),
                          ),
                          Container(
                            padding: const EdgeInsets.only(
                              top: 16,
                              left: 50,
                            ),
                            child: const Text(
                              'Vodafone',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 16,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                      top: 30,
                      left: 20,
                    ),
                    child: Column(
                      children: <Widget>[
                        SizedBox(
                          width: double.infinity,
                          child: Container(
                            child: Text(
                              "Network Provider",
                              style: TextStyle(
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Row(
                    children: [
                      Container(
                        padding: const EdgeInsets.only(
                          top: 16,
                          left: 50,
                        ),
                        child: const Text(
                          'Sim Operator',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 16,
                          ),
                        ),
                      ),
                      Container(
                        padding: const EdgeInsets.only(
                          top: 16,
                          left: 50,
                        ),
                        child: const Text(
                          'Vodafone',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 16,
                          ),
                        ),
                      ),
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                      top: 30,
                      left: 20,
                    ),
                    child: Column(
                      children: <Widget>[
                        SizedBox(
                          width: double.infinity,
                          child: Container(
                            child: Text(
                              "Serving Cell",
                              style: TextStyle(
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                              ),
                              textAlign: TextAlign.left,
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Row(
                    children: [
                      Container(
                        padding: const EdgeInsets.only(
                          top: 16,
                          left: 50,
                        ),
                        child: const Text(
                          'Sim Operator',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 16,
                          ),
                        ),
                      ),
                      Container(
                        padding: const EdgeInsets.only(
                          top: 16,
                          left: 50,
                        ),
                        child: const Text(
                          'Vodafone',
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 16,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),

但是据我所知，我认为这不合逻辑且没有组织...

我看到输出的组织不如图像中所示。.

所以我希望有人能推荐我这种类型的屏幕的好解决方案：）。

Answer 1

扑朔迷离地有两个小部件可以整理数据

1-表格 YouTube document

2-数据表 YouTube document

检查女巫对您的UI更好

class SimInformation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text('Sim information', style: TextStyle(fontWeight: FontWeight.bold),),
          DataTable(
            columns: [
              DataColumn(label: Text('Sim operator')),
              DataColumn(label: Row(
                children: <Widget>[
                  Text('Vodafone'),
                  Image.asset('assets/images/vodafone.png', width: 30, height: 30,)
                ],
              )),
            ],
            rows: [
              DataRow(cells: [
                DataCell(Row(
                  children: <Widget>[
                    Image.asset('assets/images/sim.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')),
              ]),
            ],
          ),
        ],
      ),
    );
  }
}