颤动 文本字段的问题，输入不居中。

Question

我有一个多行聊天输入的问题。当用户输入聊天内容时，输入内容应该在容器中居中。但事实并非如此，我无法用padding来解决这个问题。

以下是我得到的屏幕截图。在这里输入图片描述

我应该得到什么，而不是 。请在此输入图片描述

这里是代码。

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),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),

欢迎大家的帮助

Answer 1

Hi Sir_Joan_the_third,

我不知道，为什么你要在你选择的widgets中创建TextField，但是当我试图改进你的代码时，我遇到了一个问题，当输入改变为多行时，这就是为什么我在没有你使用的widgets的情况下编写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,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

(没有密集属性)

更新

要尽量减少Words内的填充物，可以在 TextField试试 isDense=true 中的财产 TextField 并设定 contentPadding 主要是像Alex Collette在他的答案中写的那样。

它应该是这样的

代码如下

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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

像这样设置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),
),

Answer 3

在 "文本字段装饰 "中，将 "密集 "设置为 "true

isDense : true 

并在内容填充处添加

contentPadding: EdgeInsets.only(left: 0, bottom: 5, top: 0.0, right: 0),