为什么 AutoSizeText Widget 的 textAlign 和 Wrap Widget 的 crossAxisAlignment 对齐不正确？答案

【问题标题】：Why textAlign of AutoSizeText Widget and crossAxisAlignment of Wrap Widget doesn't align correctly?为什么 AutoSizeText Widget 的 textAlign 和 Wrap Widget 的 crossAxisAlignment 对齐不正确？
【发布时间】：2021-07-13 21:12:34
【问题描述】：

我使用Wrap 和AutoSizeText 来表示同一行上的值和度量单位。

我试图在Container 末尾对齐值和度量单位，但它没有发生，我得到的是：

下面我附上代码：

                          Wrap(
                            crossAxisAlignment: WrapCrossAlignment.end,
                            children: [
                              Container(
                                  color: Colors.red,
                                  height: calculatedHeight,
                                  child: AutoSizeText(
                                    val.toString() + ' ',
                                    minFontSize: 5,
                                    textAlign: TextAlign.end,
                                    style: TextStyle(
                                        fontSize: item.textSize),
                                  )),
                              Container(
                                  color: Colors.amber,
                                  height: calculatedHeight,
                                  child: AutoSizeText(
                                    unit,
                                    textAlign: TextAlign.end,
                                    minFontSize: 5,
                                    style: TextStyle(
                                        fontSize: item.unitSize),
                                  )),
                            ],
                          ),

如果我删除 Container 它显然正确对齐，但问题是如果我删除它，文本不会调整大小..

【问题讨论】：

在这里使用Wrap 而不是Row 有什么意义？和alignment 不是跨轴
@Nagual 如果我使用 alignment: WrapAlignment.end, 没有任何变化，如果我使用 Row 问题是一样的
您希望您的 UI 看起来如何？
我希望值和度量单位在Container的底部中心对齐
绿色背景的那个？

标签： flutter dart text-alignment autoresize

【解决方案1】：

问题肯定是用Containers 包裹AutoSizeText，你可以试试这个，用Row 替换Wrap 并用FittedBox 包裹它：

                            FittedBox(
                                fit: BoxFit.fitHeight,
                                child:
                                    Row(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.end,
                                      children: [
                                        AutoSizeText(
                                          val.toString() + ' ',
                                          minFontSize: 1,
                                          style: TextStyle(
                                            fontSize: item.textSize,
                                            fontWeight: FontWeight.bold,
                                            color: HexColor(
                                              item.colors!.back!,
                                            ),
                                          ),
                                        ),
                                        AutoSizeText(
                                          unit,
                                          textAlign: TextAlign.end,
                                          minFontSize: 1,
                                          style: TextStyle(
                                            fontSize: item.unitSize,
                                            color: HexColor(
                                              item.colors!.back!,
                                            ),
                                          ),
                                        ),
                                      ),

【讨论】：

好的，谢谢！现在我尝试使用它，即使我需要 Wrap 更多