【问题标题】:Flutter: vertically align each column in a Row in different ways (top, center, bottom)Flutter:以不同的方式(顶部、中心、底部)垂直对齐 Row 中的每一列
【发布时间】:2022-09-23 01:25:01
【问题描述】:

我想以不同的方式垂直对齐 Row 小部件中的每一列:

  1. 第一列必须在顶部对齐。
  2. 第二列无关紧要,但可以居中。
  3. 第三列必须在底部对齐。

    行小部件仅提供对齐选项全部它的列以相同的方式:

    Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: []
    )
    

    重要提示:根据中心列的内容,此行具有动态高度。

    我已经尝试了很多方法,但没有成功。我会很感激任何想法。谢谢。

    标签: flutter alignment row


    【解决方案1】:

    我在复制相同的 UI 时遇到了一些困难,但最终结果就是这样:

                IntrinsicHeight(
                  child: Row(
                    children: [
                      Expanded(
                        child: Column(
                          children: const [
                            Text("text, text, text"),
                          ],
                        ),
                      ),
                      const Expanded(
                        child: Text(
                            "text, text, text,text, text, text,text, text, text,text, text, text,text, text, text,text, text, text,text, text, text,text, text, text"),
                      ),
                      Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: const [
                            Text("text, text, text"),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
    
    

    IntrinsicHeight 为所有Row 的孩子提供相同的高度。

    这是一个正在运行的示例: https://zapp.run/edit/flutter-zn00679n106?entry=lib/main.dart&file=lib/main.dart

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2010-10-01
      • 2017-01-30
      • 1970-01-01
      • 2018-08-23
      • 2021-11-03
      • 2015-11-07
      • 2021-10-29
      • 2020-11-16
      相关资源
      最近更新 更多