我想让 TextField 在水平和垂直方向上滚动

Question

我希望能够在水平或垂直方向上滚动多行 TextField。目前，EditableText 使用的 Scrollable 小部件仅允许在一个方向上滚动，即多行时的 AxisDirection.down。我的问题是它包裹了溢出的文本，这是可以理解的，但我想滚动而不是包裹文本。

我尝试过对角线滚动视图，但它不适用于 TextField。还有其他方法可以达到这个效果吗？

我的屏幕布局如下所示： 布局大致如下： Scaffold -> body: NestedScrollView body: MyCustomTextField -> Column[ConstrainedBox -> ListView.builder, Expanded -> EditableText ]

Answer 1

如果限制最大宽度TextField为某个相当大的值，则可以SingleChildScrollView使用启用的水平滚动方向将所有内容包裹起来：

\n

        SingleChildScrollView(\n          scrollDirection: Axis.horizontal,\n          child: ConstrainedBox(\n            constraints: BoxConstraints.expand(width: 1000),\n            child: TextField(\n              maxLines: null,\n              // controller and etc.\n            ),\n          ),\n        )\n

\n

另一种解决方案（基于IntrinsicWidth小部件）：

\n

        SingleChildScrollView(\n          scrollDirection: Axis.horizontal,\n          child: IntrinsicWidth(\n            stepWidth: 1000,\n            child: TextField(\n              maxLines: null,\n              // controller and etc.\n            ),\n          ),\n        )\n

\n

stepWidth: 1000防止TextField空内容崩溃。

\n

然而，使用时会产生一些后果IntrinsicWidth小部件时会产生一些后果：

\n

\n

此类相对昂贵，因为它在最终布局阶段之前添加了推测\n布局过程。尽可能避免使用它。在最坏的情况下，这个小部件可能会导致树深度为 O(N\xc2\xb2) 的布局。

\n

\n