Flutter Alertdialog 溢出截止答案

【问题标题】：Flutter Alertdialog overflow cutoffFlutter Alertdialog 溢出截止
【发布时间】：2022-01-08 03:16:03
【问题描述】：

我有一个正常工作的 Alertdialog，但我得到一个溢出错误，我无法摆脱它。我尝试过灵活和扩展，但可能在错误的级别上。

builder: (BuildContext context) => AlertDialog(
                          title: const Center(child: Text('Completing task')),
                          content: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              UnconstrainedBox(
                                child: Flexible(
                                  child: Column(
                                    children: [
                                      Text('Tag: ' + task.tag),
                                      Text("rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr"),
                                      const SizedBox(height: 10),
                                      const Text('Waiting for NFC'),
                                      const SizedBox(height: 20),
                                      const Center(
                                        child: CircularProgressIndicator(
                                          color: Colors.grey,
                                        ),
                                      ),
                                    ],
                                  ),),
                              ),
                            ],
                          ),

【问题讨论】：

标签： flutter android-alertdialog

【解决方案1】：

这里的问题是长文本。如果您希望在不溢出布局的情况下显示所有文本，那么Flexible 是一个选项。当显示的文本可能比视图的宽度长时，用 Flexible 包裹 Text 元素。

请注意，我必须从视图中删除一些不必要的元素。在这种情况下，这些元素被错误放置/误用，并加剧了问题。

还有其他方法可以解决这个问题，但我喜欢这个选项的灵活性（双关语），无需计算或猜测宽度/高度。

这里是一个解决方案，对代码进行了一些清理，并在长文本元素上使用了Flexible。

showDialog(
    context: context, 
    builder: (BuildContext context) {
        return AlertDialog(
                title: const Center(child: Text('Completing task')),
                content: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        Text('Tag: P1348'),
                        Flexible(child: Text("rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr"),),
                        const SizedBox(height: 10),
                        const Text('Waiting for NFC'),
                        const SizedBox(height: 20),
                        const Center(
                            child: CircularProgressIndicator(
                                color: Colors.grey,
                            ),
                        ),
                    ],
                )
        );
    }
);

【讨论】：

【解决方案2】：

     Container(
              child: Text('text',              
                overflow: TextOverflow.fade,
                maxLines: 1,
                softWrap: false,
              ),             
              width: 50,
      ),

【讨论】：

谢谢，这是我想要的 90% - 你有没有“宽度”的解决方案？ - 你有一个新的开始的解决方案吗？
感谢您提供答案。您能否编辑您的答案以包括对您的代码的解释？这将有助于未来的读者更好地了解正在发生的事情，尤其是那些刚接触该语言并难以理解概念的社区成员。

【解决方案3】：

SizedBox(
          width: YourOwnWidth,
          child: Text("rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr",style: TextStyle(
            overflow: TextOverflow.clip
          ),),
        );

您可以使用的简单解决方案

【讨论】：

谢谢，这是我想要的 90% - 你有没有“宽度”的解决方案吗？ - 你有一个新的开始的解决方案吗？