如何在 flutter 中设计像 whatsapp 这样的文本框

Question

我需要文本字段应垂直扩展最多按下 5 个回车键

在第 5 行之后，其他行应该包含在滚动条内

如何使用 flutter 实现我需要的文本字段

现在我在文本字段中设置了 maxlines: null

Answer 1

在TextField中添加maxLine和minLine即可实现

new TextField(
             minLines: 1,
             maxLines: 5,

            decoration: new InputDecoration(
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.grey, width: 5.0),
              ),
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.grey, width: 5.0),
              ),
              hintText: 'Mobile Number',
            ),
          )

Answer 2

谢谢你们的建议，但我已经通过下面的代码找到了实际的文本字段

                 Flexible(
                          child: new ConstrainedBox(
                            constraints: new BoxConstraints(
                              minWidth: size.width,
                              maxWidth: size.width,
                              minHeight: 25.0,
                              maxHeight: 135.0,
                            ),
                            child: new Scrollbar(
                              child: new TextField(
                                cursorColor: Colors.red,
                                keyboardType: TextInputType.multiline,
                                maxLines: null,                                    
                                controller: tc,
                                _handleSubmitted : null,
                                decoration: InputDecoration(
                                  border: InputBorder.none,
                                  contentPadding: EdgeInsets.only(
                                      top: 2.0,
                                      left: 13.0,
                                      right: 13.0,
                                      bottom: 2.0),
                                  hintText: "Type your message",
                                  hintStyle: TextStyle(
                                    color:Colors.grey,
                                  ),
                                ),
                              ),                           
                            ),
                          ),
                        ),

如何在 flutter 中设计像 whatsapp 这样的文本框

How to design a textfield like whatsapp in flutter

uitextfield

flutter-layout