容器设计结构——Flutter

Question

我在设计时遇到以下问题，在容器内我有我想要组织的元素，如下所示：

直到我设法编写了这段代码：

return Container(
  child: ListView(
    controller: controller,
    children: [
      Center(
        child: Container(
          margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
          height: 3,
          width: 50,
          decoration: BoxDecoration(
            color: Colors.blue.withOpacity(0.3),
            borderRadius: BorderRadius.circular(5)
          ),
        ),
      ),
      SizedBox(
        height: 20,
      ),
      Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            //Text('Recorrido',style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold)),
            ClipOval(
              child: Image.asset(
                "assets/img/findout/friends2.jpg",
                width: 50,
                height: 50,
                fit: BoxFit.cover,
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              textDirection: TextDirection.ltr,
              children: [
                Text('Ubicacion',
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold
                  )
                ),
                Text('Molina, Vieja',
                  style: TextStyle(color: Colors.black)
                )
              ],
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.end,
              textDirection: TextDirection.ltr,
              children: [
                Text('Mitsubishi',
                  style: TextStyle(
                    color: Colors.black,
                    fontWeight: FontWeight.bold
                  )
                ),
                Text('FRT-674',
                  style: TextStyle(color: Colors.black)
                )
              ],
            ),
            SizedBox(
              height: 20,
            )
          ],
        ),
      ),
      Center(
        child: Text(
          'Informacion del Vehiculo',
          style: TextStyle(color: Colors.black),
        ),
      ),
      Container(
        height: 150,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              children: [
                FaIcon(
                  FontAwesomeIcons.clock,
                  size: 40,
                ),
                Text(
                  '10.2',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 15
                  ),
                ),
                Text(
                  'Horas Corridos',
                  style: TextStyle(color: Colors.white),
                )
              ],
            ),
            Column(
              children: [
                FaIcon(
                  FontAwesomeIcons.tachometerAlt,
                  size: 40,
                ),
                Text(
                  '30 KM',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold
                  ),
                ),
                Text(
                  'Total Distancia',
                  style: TextStyle(color: Colors.white),
                )
              ],
            ),
            Column(
              children: [
                FaIcon(
                  FontAwesomeIcons.thermometerQuarter,
                  size: 40,
                ),
                Text(
                  '20',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold
                  ),
                ),
                Text(
                  'Combustible',
                  style: TextStyle(color: Colors.white),
                )
              ],
            )
          ],
        ),
        decoration: BoxDecoration(
          color: colorPrimario,
          borderRadius: BorderRadius.circular(15)
        ),
      )
    ],
  ),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(15),
      topRight: Radius.circular(15),
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 1), // changes position of shadow
      ),
    ],
  ),
);

得到的结果是这在设计上有这个错误：

您如何以正确的方式纠正此设计并实现该设计？ . 谢谢你的帮助。

Answer 1

尝试向将行作为子项的容器添加一些填充

Container(
  height: 150,
  padding: EdgeInsets.only(top: 20),
  child: Row(
      
    ),
  ),

Answer 2

修复蓝色容器：

• 设置crossAxisAlignment将该行： crossAxisAlignment.Center
• 对于行中的每一列，将mainAxisAlignment设置为mainAxisAlignment.spaceEvenly

Answer 3

第一个 body Container 设置 padding：

body: Container(
    padding: const EdgeInsets.all(10.0),
    child: ListView(

对于带有图标的 Row 使用 Row with Expended Widget：

Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Expanded(
                flex: 2,
                child: Container(
                  child: Row(
                    children: [
                      ClipOval(
                        child: Image.asset(
                          "assets/img/findout/friends2.jpg",
                          width: 50,
                          height: 50,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(left: 10.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          textDirection: TextDirection.ltr,
                          children: [
                            Text('Ubicacion',
                                style: TextStyle(
                                    color: Colors.black,
                                    fontWeight: FontWeight.bold
                                )
                            ),
                            Text('Molina, Vieja',
                                style: TextStyle(color: Colors.black)
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                )
              ),
              Expanded(
                flex: 1,
                child: Container(
                  child:  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    textDirection: TextDirection.ltr,
                    children: [
                      Text('Mitsubishi',
                          style: TextStyle(
                              color: Colors.black,
                              fontWeight: FontWeight.bold
                          )
                      ),
                      Text('FRT-674',
                          style: TextStyle(color: Colors.black)
                      )
                    ],
                  ),
                )
              )

            ],
          ),
        )

蓝色容器：

Container(
          height: 150,
          padding: const EdgeInsets.all(5.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    FaIcon(
                      FontAwesomeIcons.clock,
                      size: 40,
                    ),
                    Text(
                      '10.2',
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 15
                      ),
                    ),

为每一列添加mainAxisAlignment: MainAxisAlignment.center,