如何在 Text 或 TextField flutter 中显示用户数据

Question

我想将用户写入容器中的 TextField 的数据显示为文本。 在接收数据时，我给了 Container 一个恒定的高度，并为 TextField 设置了 maxLines: 10000，这样当用户在不溢出 Container 的情况下写入时，文本就会在 Container 内向上移动。 是否有一种结构可以以这种方式显示输出用户数据？ 当我尝试以相同的方式显示输出时，它不显示溢出的文本，我如何使其可滚动？

这是用户数据接收代码：

 Padding(
             padding: const EdgeInsets.symmetric(
               horizontal: 4,
             ),
             child: Container(
               height: MediaQuery.of(context).size.height * 7 / 10,
               decoration: BoxDecoration(
                 border: Border.all(
                   color: UserColorHelper.Blue,
                   width: 1,
                 ),
                 borderRadius: BorderRadius.circular(4),
               ),
               child: Padding(
                 padding: const EdgeInsets.all(2.0),
                 child: TextField(
                   decoration: InputDecoration.collapsed(
                       hintText: "Note here..."),
                   style: TextStyle(color: UserColorHelper.Light),
                   keyboardType: TextInputType.text,
                   maxLines: 10000,
                   textInputAction: TextInputAction.done,
                   autofocus: false,
                   onEditingComplete: () {},
                 ),
               ),
             ),
           ),

文本_输入

Answer 1

使用 TextEditingController

添加

 controller: reasonController,

将您的代码修复为：

  final reasonController = TextEditingController();


Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: 4,
      ),
      child: Container(
        height: MediaQuery.of(context).size.height * 7 / 10,
        decoration: BoxDecoration(
          border: Border.all(
            color: UserColorHelper.Blue,
            width: 1,
          ),
          borderRadius: BorderRadius.circular(4),
        ),
        child: Padding(
          padding: const EdgeInsets.all(2.0),
          child: TextField(
            controller: reasonController,
            decoration: InputDecoration.collapsed(
                hintText: "Note here..."),
            style: TextStyle(color: UserColorHelper.Light),
            keyboardType: TextInputType.text,
            maxLines: 10000,
            textInputAction: TextInputAction.done,
            autofocus: false,
            onEditingComplete: () {
              print(reasonController.text);
            },
          ),
        ),
      ),
    ),

从控制器获取文本

print(reasonController.text) 

Answer 2

你可以使用 textfield() 的溢出属性，做这样的事情，

overflow: TextOverflow.ellipsis,

或者

overflow: TextOverflow.fade,