TextField 自动调整大小颤振

Question

当你输入像 whatsapp 这样的长消息时，如何自动调整 TextField 的大小？

这是我的 TextField 代码：

                    Row(
                      children: [
                        Expanded(
                          flex: 1,
                          child: Icon(
                            Icons.tag_faces,
                            color: Colors.grey,
                            size: 30,
                          ),
                        ),
                        Expanded(
                          flex: 8,
                          child: TextField(
                            controller: inputTextController,
                            style: TextStyle(
                                color: Colors.black
                            ),
                            decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: 'Type a message',
                                hintStyle: TextStyle(
                                  color: Color(0xff99999B),
                                )
                            ),
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: IconButton(
                            icon: Icon(
                              Icons.camera_alt,
                              color: Colors.grey,
                              size: 30,
                            ),
                            padding: EdgeInsets.all(0),
                            onPressed: () {
                              //print(inputTextController.text);
                            },
                          ),
                        )
                      ],
                    ),

尝试使用 maxLines: null，它实际上适用于 text/message 自动输入，但文本字段不会垂直调整大小。

Answer 1

下面是我的实现：

Container(
                  margin: const EdgeInsets.only(top: 20, bottom: 8),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(2),
                  ),
                  constraints: BoxConstraints(
                    minWidth: MediaQuery.of(context).size.width,
                    maxWidth: MediaQuery.of(context).size.width,
                    minHeight: 25.0,
                    maxHeight: 100.0,
                  ),
                  child: Scrollbar(
                    child: TextField(
                      keyboardType: TextInputType.multiline,
                      textInputAction: TextInputAction.done,
                      onSubmitted: (value) {
                       
                      },
                      maxLines: null,
                      // focusNode: focusNode,
                      controller: _message,
                      style: const TextStyle(color: Colors.white),
                      decoration: const InputDecoration(
                        border: InputBorder.none,
                        contentPadding:
                            EdgeInsets.symmetric(horizontal: 13, vertical: 13),
                        hintText: "Message(optional)",
                        hintStyle:
                            TextStyle(color: Colors.white24, fontSize: 14),
                      ),
                    ),
                  ),
                ),

TextField 自动调整大小颤振

TextField auto resize flutter

flutter

flutter-layout