如何为文本设置多行？

Question

所以我有一个取自谷歌翻译的翻译小部件，一切正常。翻译输入文本时，结果为文本形式（不是文本字段）。在我写一段长的翻译段落的情况下，我可以为文本字段实现“keyboardType: TextInputType.multiline, maxLines: null,”，但我不知道如何为文本做同样的事情。文本小部件也有吗？

目前，翻译器小部件如下所示：

我希望灰色区域有多行可以滚动浏览。

代码：

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),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  this._textTranslated,
                  softWrap: true,
                  style: TextStyle(color: Colors.blue[700], fontSize: 20),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

Answer 1

您可以将Text 包装在SingleChildScrollView 中：

Flexible(
  child: SingleChildScrollView(
    child: Container(
      color: Colors.grey,
      margin: EdgeInsets.only(left: 16.0),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text(
          this._textTranslated,
          softWrap: true,
          style: TextStyle(color: Colors.blue[700], fontSize: 20),
        ),
      ),
    ),
  ),
),