Flutter Align 来自 Column 的元素与 Row 一致

Question

我需要构建以下设计：

到目前为止，我创建了一个包含 3 个点图标的行、一个带有圆形头像的列、一条线和加号图标以及输入。

我不知道如何将行（输入）的中心与 cercle 头像的中心对齐...

IntrinsicHeight(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Icon(Icons.drag_indicator),
      Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Visibility(
            visible: this.index > 0,
            child: VerticalLine(),
          ),
          Material(
            borderRadius: BorderRadius.circular(25.0),
            elevation: 8.0,
            child: CircleAvatar(
              backgroundColor: Colors.blue,
              child: Text(this._getLabel()),
              radius: 25.0,
            ),
          ),
          VerticalLine(),
          Icon(Icons.add_box_rounded, size: 15.0),
        ],
      ),
      Expanded(
        child: DropdownSearch<String>(
          mode: Mode.MENU,
          showSelectedItems: true,
          items: ["Brazil", "Italia (Disabled)", "Tunisia", 'Canada'],
          label: "End",
          hint: "country in menu mode",
          popupItemDisabled: (String s) => s.startsWith('I'),
          onChanged: print,
          selectedItem: "Brazil",
          maxHeight: 50.0,
        ),
      ),
    ],
  ),
);

这是它的样子：

知道如何水平对齐圆形头像的中心与输入的中心吗？

Answer 1

这里很简单。您需要将圆圈和输入项放在样式为 display:flex align-items: center 的 'div' 块中，将 display: block 设置为图像，并将 margin: 0 设置为任何 '' 标签

<div class="d-flex align-items-center"> 
<img src='/images/avatar10.png' width="41" height="41" alt="" class="img-radius me-1 " style="display: block" /> 
<h4 class="color-main" style="margin: 0">21341241</h4>
</div>

Answer 2

最终，我在第一个 CircleAvatar 的顶部创建了一条透明线，让所有东西都对称，我还将 add_icon 移动为输入行下方的一行：

Container(
          color: this.index == 0 ? Colors.red : Colors.pink,
          child: IntrinsicHeight(
            child: Column(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(Icons.drag_indicator),
                    Padding(
                      padding: const EdgeInsets.only(right: 10.0),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          VerticalLine(
                            transparent: index == 0,
                          ),
                          Material(
                            borderRadius: BorderRadius.circular(25.0),
                            elevation: 8.0,
                            child: CircleAvatar(
                              backgroundColor: Colors.blue,
                              child: Text(this._getLabel()),
                              radius: 25.0,
                            ),
                          ),
                          VerticalLine(),
                        ],
                      ),
                    ),
                    Expanded(
                      child: DropdownSearch<String>(
                        mode: Mode.MENU,
                        showSelectedItems: true,
                        items: ["Brazil", "Italia (Disabled)", "Tunisia", 'Canada'],
                        label: "End",
                        hint: "country in menu mode",
                        popupItemDisabled: (String s) => s.startsWith('I'),
                        onChanged: print,
                        selectedItem: "Brazil",
                        maxHeight: 50.0,
                      ),
                    ),
                  ],
                ),
                Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(left: 42.0),
                      child: Icon(Icons.add_box_rounded, size: 15.0),
                    ),
                  ],
                )
              ],
            ),
          ),
        );

Answer 3

问题在于它实际上是居中的，但是与具有头像和线条的完整Column相比。

我建议改用这种结构（伪代码）

Column:
    topline
    Row:
        dots
        avatar
        dropdown
    bottomline
    icon

这样就可以很好地对齐了。不过，您现在遇到的问题是这些线不会很好地对齐。您可能需要给列 crossAxisAlignment: CrossAxisAlignment.start 并用填充将行包裹起来，以根据您的喜好将 space 添加到它们的左侧

Flutter Align 来自 Column 的元素与 Row 一致

Flutter Align element from Column in line with Row

flutter

flutter-layout

flutter-web