为什么 SizedBox 不限制 Text 小部件的宽度？

Question

所以我正在制作一个简单的消息应用程序，但遇到了以下问题：

我将 SizedBox 的宽度设置为 100，但是当子组件是 Text 小部件时，它会覆盖 SizedBox 的宽度。

该小部件是从另一个文件中的 ListView.builder 调用的。

我是否应该使用不同的小部件来代替指定大小的框？

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: SizedBox(
        width: 100,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(14.0)),
            color: currentUserIsSender ? Styles.accentColor30 : Colors.grey.shade200,
          ),
          padding: EdgeInsets.all(8.0),
          child: Text(
            message,
            softWrap: true,
          ),
        ),
      ),
    );
  }

谢谢

应用问题图片

Answer 1

问题是，SizedBox只能在父级设置的约束范围内设置小部件大小。许多小部件（例如 Padding）希望其子部件占据 100% 的可用空间。这是有道理的，因为如果孩子还小，他们就不知道把它放在哪里。

如果您希望孩子小于父母，您可以使用Center或Align，例如替换

Padding(
  child: SizedBox(
    width: 100,
    child: ...
    ),
  ),
);

和

Padding(
  child: Center(
    child: SizedBox(
      width: 100,
      child: ...
      ),
    ),
  ),
);

（对于聊天应用程序，您可能想使用Align而不是Center）

相关阅读：https ://flutter.dev/docs/development/ui/layout/constraints