时间戳

首页 > 解决方案 > flutter Column Childs完全居中

flutter - flutter Column Childs完全居中

问题描述

我正在尝试 使用以下代码实现与以下图像img类似的结果：

Container(
            padding: EdgeInsets.symmetric(vertical: 2, horizontal: 0),
            height: 60,
            color: Colors.blueAccent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                CustomPaint(painter: CircleHelper()),
                Container(height: 7),
                Container(
                    height: 40,
                    child: VerticalDivider(color: Colors.lightBlueAccent))
              ],
            ))

结果我得到了： img

如您所见，它们并非完全居中；

谢谢你的帮助

标签： flutterflutter-layout

解决方案

使用 Stack 小部件将圆形容器放置在分隔线上。这是代码。

注意： VerticalDivider 没有按预期工作。我使用了 Divider 小部件，并用 Transform.rotate 小部件包裹它并将其旋转 90 度 (pi / 2)。您需要导入“dart:math”。

Container(
    padding: EdgeInsets.symmetric(vertical: 2, horizontal: 0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Stack(
          children: [
            Transform.rotate(
                angle: pi / 2,
                child: Divider(
                  color: Colors.lightBlueAccent,
                )),
            Column(
              children: [
                Container(
                  height: 20,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.blue)),
                ),
                Container(
                  height: 20,
                  margin: EdgeInsets.only(top: 20),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.blue)),
                ),
              ],
            ),
          ],
        )
      ],
    ),
  ),

推荐阅读