这可能听起来容易,但我们如何能做一个多行可编辑的文本域颤振?TextField只与单行工作。
编辑:一些精确度,因为看起来不清楚。 虽然您可以将multiline设置为虚拟换行文本内容,但它仍然不是多行。它是一行显示成多行。 如果你想做这样的事,那就不行。因为你没有回车键。没有回车键就没有多路线路。
这可能听起来容易,但我们如何能做一个多行可编辑的文本域颤振?TextField只与单行工作。
编辑:一些精确度,因为看起来不清楚。 虽然您可以将multiline设置为虚拟换行文本内容,但它仍然不是多行。它是一行显示成多行。 如果你想做这样的事,那就不行。因为你没有回车键。没有回车键就没有多路线路。
当前回答
使用这个
Expanded(
child: TextField(
controller: textMessageController,
keyboardType: TextInputType.multiline,
textCapitalization: TextCapitalization.sentences,
minLines: 1,
maxLines: 3,
onChanged: ((value) {
setState(() {
_messageEntrer = value;
});
}),
decoration: InputDecoration(
hintText: "Type your message here",
hintMaxLines: 1,
contentPadding:
const EdgeInsets.symmetric(horizontal: 8.0, vertical: 10),
hintStyle: TextStyle(
fontSize: 16,
),
fillColor: Colors.white,
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Colors.white,
width: 0.2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Colors.black26,
width: 0.2,
),
),
),
),
),
其他回答
如果你想要你的TextField是适应用户输入,然后这样做:
TextField(
keyboardType: TextInputType.multiline,
minLines: 1,//Normal textInputField will be displayed
maxLines: 5,// when user presses enter it will adapt to it
);
在这里,你可以将Max行设置为任何你想要的,你就可以开始了。 在我看来,将maxlines设置为null不是一个好的选择,这就是为什么我们应该将它设置为一些值。
这段代码为我工作,我也能够使用ENTER的网页和移动。
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: ConstrainedBox(
// fit: FlexFit.loose,
constraints: BoxConstraints(
maxHeight: height,//when it reach the max it will use scroll
maxWidth: width,
),
child: const TextField(
keyboardType: TextInputType.multiline,
maxLines: null,
minLines: 1,
decoration: InputDecoration(
fillColor: Colors.blueAccent,
filled: true,
hintText: "Type ",
border: InputBorder.none,
),
),
),
)
]);
}
你必须在TextField小部件中使用这一行:
maxLines: null,
如果没有工作,请注意,你必须删除这个:
textInputAction: TextInputAction.next
它是禁用多行属性动作在键盘..
使用扩展小部件进行动态感觉
Expanded(
child: TextField(
keyboardType: TextInputType.multiline,
minLines: 1,
maxLines: 3,
),
)
虽然其他人已经提到键盘类型“TextInputType”。multiline”可以使用,我想添加一个TextField的实现,当输入新行时自动调整其高度,因为它通常希望模仿WhatsApp和类似应用程序的输入行为。
每次更改文本时,我都会分析输入中的'\n'字符的数量。这似乎有点过分,但不幸的是,到目前为止,我在Flutter中没有找到更好的实现这种行为的可能性,即使在旧的智能手机上,我也没有注意到任何性能问题。
class _MyScreenState extends State<MyScreen> {
double _inputHeight = 50;
final TextEditingController _textEditingController = TextEditingController();
@override
void initState() {
super.initState();
_textEditingController.addListener(_checkInputHeight);
}
@override
void dispose() {
_textEditingController.dispose();
super.dispose();
}
void _checkInputHeight() async {
int count = _textEditingController.text.split('\n').length;
if (count == 0 && _inputHeight == 50.0) {
return;
}
if (count <= 5) { // use a maximum height of 6 rows
// height values can be adapted based on the font size
var newHeight = count == 0 ? 50.0 : 28.0 + (count * 18.0);
setState(() {
_inputHeight = newHeight;
});
}
}
// ... build method here
TextField(
controller: _textEditingController,
textInputAction: TextInputAction.newline,
keyboardType: TextInputType.multiline,
maxLines: null,
)