当 GridView 中的 Container 缩短时，Flutter TextField 不居中

Question

我正在尝试创建一个以容器为中心的文本字段网格。在网格瓷砖有点下蹲之前效果很好：

如您所见，文字太低了。当纵横比使图块高一点时，它们会正确居中。

如何使文本在短网格中居中？这里是 dartpad 上的代码：

dartpad 代码是这样的：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: GridView.count(
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            crossAxisCount: 2,
            childAspectRatio: 10,
            padding: const EdgeInsets.all(0.0),
            mainAxisSpacing: 0.0,
            crossAxisSpacing: 0.0,
            children: <Widget>[
              EditableButton('Hello'),
              EditableButton('World'),
            ],
          ),
        ),
      ),
    );
  }
}

class EditableButton extends StatelessWidget {
  final controller;

  EditableButton(String text) : controller = TextEditingController(text: text);

  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(0.5),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(20),
        child: Container(
          color: Colors.deepPurple,
          child: Center(
            child: TextField(
              controller: controller,
              decoration:
                  InputDecoration.collapsed(hintText: 'Tag description'),
              textAlign: TextAlign.center,
              textAlignVertical: TextAlignVertical.top,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

这可能会有所帮助，而不是使用 InputDecoration.collapsed，仅使用 InputDecoration 并使用 ContentPadding 属性来操纵填充如下：

TextField(
          controller: controller,
          decoration: InputDecoration(
            hintText: 'Tag description',
            contentPadding: EdgeInsets.only(bottom: 10.0),
          ),

Answer 2

这对我有用

TextField( textAlign: TextAlign.center, decoration: InputDecoration( contentPadding: EdgeInsets.only(bottom: 10.0), ), )

当 GridView 中的 Container 缩短时，Flutter TextField 不居中

Flutter TextField not centering when its Container shortened in GridView

gridview

center

textfield

flutter