Flutter中如何为Text组件实现多行滚动显示？

嘿，我懂你的需求啦——就是想让灰色区域里的翻译结果Text组件既能多行显示，又能在内容太长的时候滚动查看对吧？其实这个问题很好解决，因为Text组件本身没有自带滚动能力，我们只需要给它套一个滚动容器就行，最适合这个场景的就是SingleChildScrollView。

具体修改方案： #

• 把灰色区域里的Align组件替换成SingleChildScrollView
• 保留你已经设置好的Text组件的softWrap: true（这个属性是让文本自动换行的关键）
• 这样当翻译内容超出灰色区域的高度时，就会自动触发垂直滚动效果

修改后的完整代码（重点看翻译结果区域的变化）： #

Widget build(BuildContext context) {
 return Container(
 height: 350.0,
 color: Colors.white,
 child: Column(
 crossAxisAlignment: CrossAxisAlignment.start,
 children: <Widget>[
 // 输入区域代码保持不变
 Expanded(
 child: Container(
 margin: EdgeInsets.only(left: 16.0),
 child: TextField(
 keyboardType: TextInputType.multiline,
 maxLines: null,
 focusNode: this.widget.focusNode,
 controller: this._textEditingController,
 onChanged: this._onTextChanged,
 decoration: InputDecoration(
 contentPadding: const EdgeInsets.symmetric(vertical: 10),
 border: InputBorder.none,
 suffixIcon: RawMaterialButton(
 onPressed: () {
 if (this._textEditingController.text != "") {
 this.setState(() {
 this._textEditingController.clear();
 this._textTranslated = "";
 });
 } else {
 this.widget.onCloseClicked(false);
 }
 },
 child: new Icon(
 Icons.close,
 color: Colors.grey,
 ),
 shape: new CircleBorder(),
 ),
 ),
 ),
 ),
 ),
 Divider(),
 // 修改后的翻译结果展示区域
 Flexible(
 child: Container(
 color: Colors.grey,
 margin: EdgeInsets.only(left: 16.0),
 // 用SingleChildScrollView替代原来的Align
 child: SingleChildScrollView(
 padding: EdgeInsets.symmetric(vertical: 10), // 可选：添加内边距优化视觉体验
 child: Text(
 this._textTranslated,
 softWrap: true,
 style: TextStyle(color: Colors.blue[700], fontSize: 20),
 ),
 ),
 ),
 ),
 ],
 ),
 );
 }

额外说明： #

• SingleChildScrollView是Flutter里最基础的滚动容器，专门用来包裹单一子组件实现滚动，完全适配你现在的场景
• 如果之后需要更复杂的滚动功能（比如下拉刷新、加载更多），可以考虑换成ListView，但目前用SingleChildScrollView就足够满足需求
• 你可以根据自己的设计需求调整SingleChildScrollView的padding属性，让文本和容器边缘保持合适的间距，提升整体美观度

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