Flutter 将列中的一个子元素对齐到最右边,其他子元素对齐到中心

标签 flutter dart flutter-layout flutter-row

您能帮我将列中的一个元素对齐到最右边吗?

enter image description here

请帮助我

最佳答案

使用 Align 包裹该图标并将对齐方式设置为 centerRight ,如下所示:

 IntrinsicHeight(
        child: Row(
          children: [
            Expanded(
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerRight,
                    child: Icon(
                      Icons.info,
                      size: 20,
                    ),
                  ),
                  Icon(Icons.lock_clock),
                  Text('item 1'),
                ],
              ),
            ),
            VerticalDivider(
              color: Colors.black,
            ),
            Expanded(
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerRight,
                    child: Icon(
                      Icons.info,
                      size: 20,
                    ),
                  ),
                  Icon(Icons.lock_clock),
                  Text('item 1'),
                ],
              ),
            ),
            VerticalDivider(
              color: Colors.black,
            ),
            Expanded(
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerRight,
                    child: Icon(
                      Icons.info,
                      size: 20,
                    ),
                  ),
                  Icon(Icons.lock_clock),
                  Text('item 1'),
                ],
              ),
            ),
          ],
        ),
      )

enter image description here

或者,如果您希望该图标附加到叠加层中列的右上角,您可以使用堆栈小部件包装列并在其中设置该图标,如下所示:

IntrinsicHeight(
            child: Row(
              children: [
                Expanded(
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Column(
                          children: [
                            Icon(Icons.lock_clock),
                            Text('item 1'),
                          ],
                        ),
                      ),
                      Positioned(
                        child: Icon(
                          Icons.info,
                          size: 20,
                        ),
                        top: 0,
                        right: 0,
                      )
                    ],
                  ),
                ),
                VerticalDivider(
                  color: Colors.black,
                ),
                Expanded(
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Column(
                          children: [
                            Icon(Icons.lock_clock),
                            Text('item 1'),
                          ],
                        ),
                      ),
                      Positioned(
                        child: Icon(
                          Icons.info,
                          size: 20,
                        ),
                        top: 0,
                        right: 0,
                      )
                    ],
                  ),
                ),
                VerticalDivider(
                  color: Colors.black,
                ),
                Expanded(
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: Column(
                          children: [
                            Icon(Icons.lock_clock),
                            Text('item 1'),
                          ],
                        ),
                      ),
                      Positioned(
                        child: Icon(
                          Icons.info,
                          size: 20,
                        ),
                        top: 0,
                        right: 0,
                      )
                    ],
                  ),
                )
              ],
            ),
          )

enter image description here

这使图标更靠近列。

关于Flutter 将列中的一个子元素对齐到最右边,其他子元素对齐到中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73619578/

相关文章:

dart - 如何将 future 结果与 flutter 中的流连接起来?

flutter - Flutter中TextFieldForm中的字母间距

google-maps - 使用 Flutter 在谷歌地图中添加标记

json - Blob 和 JSON : How to encode and decode

directory - 在处理 Directory 类时如何识别 Dart 中的符号链接(symbolic link)?

Flutter:type_ahead建议框高度?

flutter - 如何在flutter的背景上设置自定义声音通知?

dart - 在Dart中,静态成员,最终成员和const成员在编译时有什么区别?

flutter - flutter 中 ScrollView 内的Listview

android - 断言失败 : line 6075 pos 12: 'child == _child' : is not true