textformfield的颤振问题，输入不集中
textformfield的颤振问题，输入不集中
提问于 2020-06-11 20:52:06
我在多行聊天输入方面有问题。当用户输入聊天时，输入应该集中在容器中。然而，事实并非如此，我无法用垫子修复它。
这是我得到的屏幕：在这里输入图像描述
我应该得到的是：在这里输入图像描述
以下是代码：
Container(
width: screenWidth - 130.0,
height: 30.0,
padding: EdgeInsets.fromLTRB(8.0, 0.0, 8.0, 0.0),
decoration: BoxDecoration(
color: Colors.grey[200],
borderRadius: BorderRadius.circular(15.0)),
child: new ConstrainedBox(
constraints: BoxConstraints(maxHeight: 300.0),
child: ScrollConfiguration(
behavior: DisableScrollGlow(),
child: new Scrollbar(
child: new SingleChildScrollView(
scrollDirection: Axis.vertical,
reverse: true,
child: Center(
child: new TextField(
keyboardType: TextInputType.text,
autofocus: true,
maxLines: null,
controller: _messageController,
decoration: InputDecoration(
contentPadding:
EdgeInsets.only(left: 0, bottom: 0.0, top: 0.0, right: 0),
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
border: InputBorder.none,
focusedBorder: InputBorder.none),
),
),
),
),
),
),
),欢迎所有的帮助。
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-06-13 16:56:32
嗨，Sir_Joan_the_third，
我不是shure，您为什么要在您选择的小部件中创建TextField，但是当我试图改进您的代码时，当输入更改到多行时，我遇到了问题。这就是为什么我在没有您使用的小部件的情况下编码TextField的原因。使用这段代码，文本居中很好，多行没有问题。
import 'package:flutter/material.dart';
class TempTest extends StatefulWidget {
@override
_TempTestState createState() => _TempTestState();
}
class _TempTestState extends State<TempTest> {
TextEditingController _messageController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(10.0),
child: Center(
child: ListTile(
leading: IconButton(
icon: Icon(Icons.image), onPressed: () => print('add photo')),
trailing: IconButton(
icon: Icon(Icons.send), onPressed: () => print('send text')),
title: TextField(
keyboardType: TextInputType.text,
autofocus: true,
maxLines: null,
controller: _messageController,
decoration: InputDecoration(
isDense: true,
contentPadding:
EdgeInsets.only(left: 0, bottom: 0.0, top: 0.0, right: 0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(width: 0, style: BorderStyle.none),
),
filled: true,
),
),
),
),
),
);
}
}结果具有ListTile: (没有稠密属性)
更新
若要最小化TextField中单词的填充，请尝试TextField中的isDense=true属性，并将contentPadding设置为0。主要就像亚历克斯·科莱特在他的回答中所写的。
它应该是这样的
使用以下代码
import 'package:flutter/material.dart';
class SmallInputField extends StatefulWidget {
@override
_SmallInputFieldState createState() => _SmallInputFieldState();
}
class _SmallInputFieldState extends State<SmallInputField> {
TextEditingController _messageController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Material(
elevation: 5.0,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(1.0),
topRight: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10.0, horizontal: 20.0),
child: Text('anger',
style: TextStyle(fontSize: 20.0, color: Colors.black87)),
),
),
ListTile(
dense: true,
contentPadding: EdgeInsets.all(0),
leading: IconButton(
constraints: BoxConstraints(maxHeight: 24),
padding: EdgeInsets.all(0),
icon: Icon(Icons.image),
onPressed: () => print('add photo')),
trailing: IconButton(
constraints: BoxConstraints(maxHeight: 24),
padding: EdgeInsets.all(0),
icon: Icon(Icons.send),
onPressed: () => print('send text')),
title: TextField(
style: TextStyle(fontSize: 24),
keyboardType: TextInputType.text,
autofocus: true,
maxLines: null,
controller: _messageController,
decoration: InputDecoration(
isDense: true,
labelStyle: TextStyle(fontSize: 20),
contentPadding:
EdgeInsets.only(left: 10, bottom: 0, top: 0.0, right: 0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(width: 0, style: BorderStyle.none),
),
filled: true,
),
),
),
],
),
),
);
}
}Stack Overflow用户
发布于 2020-06-11 21:29:30
将textAlign设置为TextAlign.center如下：
TextField(
keyboardType: TextInputType.text,
autofocus: true,
maxLines: null,
controller: controller,
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding:
EdgeInsets.only(left: 0, bottom: 0.0, top: 0.0, right: 0),
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
border: InputBorder.none,
focusedBorder: InputBorder.none),
),Stack Overflow用户
发布于 2020-06-13 16:18:16
在文本字段中，装饰保持稠密等于真
isDense : true 在内容填充中添加
contentPadding: EdgeInsets.only(left: 0, bottom: 5, top: 0.0, right: 0),页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62333368
复制相关文章
相似问题
腾讯云开发者
