Flutter Web中Row的MainAxisAlignment.start与SelectionArea兼容问题求助

这是Flutter 3.7版本Web端的已知布局bug，SelectionArea组件会给子元素添加额外约束或内边距，破坏Row的MainAxisAlignment.start对齐效果，导致文本错位和空白。以下是几种保留SelectionArea同时修复问题的方法：

方法一：用Align强制左对齐 #

给SelectionArea包裹Align组件，强制其左对齐，覆盖SelectionArea的异常布局行为：

Expanded(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: _event
        .map((e) => Padding(
              padding: const EdgeInsets.all(8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    width: 20,
                    child: Text(
                      _event.indexOf(e).toString(),
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                      style: const TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18),
                    ),
                  ),
                  const SizedBox(width: 10),
                  Expanded(
                    flex: 1,
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: SelectionArea(
                        child: Text(
                          e,
                          softWrap: true,
                          textAlign: TextAlign.left,
                          style: const TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ))
        .toList(),
  ),
)

方法二：解除SelectionArea的最小宽度约束 #

给Text包裹ConstrainedBox，设置minWidth: 0，消除SelectionArea在Web端给Text强加的最小宽度限制：

Expanded(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: _event
        .map((e) => Padding(
              padding: const EdgeInsets.all(8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    width: 20,
                    child: Text(
                      _event.indexOf(e).toString(),
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                      style: const TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18),
                    ),
                  ),
                  const SizedBox(width: 10),
                  Expanded(
                    flex: 1,
                    child: SelectionArea(
                      child: ConstrainedBox(
                        constraints: const BoxConstraints(minWidth: 0),
                        child: Text(
                          e,
                          softWrap: true,
                          textAlign: TextAlign.left,
                          style: const TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ))
        .toList(),
  ),
)

方法三：升级Flutter版本（推荐） #

Flutter 3.10及以上版本已经修复了Web端SelectionArea的布局兼容性问题，升级到最新稳定版可以彻底解决这个bug，同时获得更多新特性和性能优化。

内容的提问来源于stack exchange，提问作者Patrick Lee