Question

我尝试查找大量资源，但不幸的是，我找不到一种在文本字段中垂直居中对齐文本的方法。我也尝试使用suffixIcon代替后缀，但还是不走运。这是我的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(
          Icons.menu,
          color: Colors.black,
        ),
        backgroundColor: Colors.white,
        title: Container(
          margin: EdgeInsets.only(bottom: 10),
          child: Image.asset(
            "icons/logo.png",
          ),
        ),
        bottom: PreferredSize(
          child: Padding(
            padding: EdgeInsets.only(
              left: 10,
              right: 10,
              bottom: 10,
            ),
            child: Container(
              height: 40,
              child: TextField(
                textAlignVertical: TextAlignVertical.center,
                textAlign: TextAlign.left,
                maxLines: 1,
                style: TextStyle(
                  fontSize: 13,
                ),
                decoration: InputDecoration(
                    suffixIcon: IconButton(icon: Icon(Icons.search, color: Colors.black,), onPressed: (){}),
                    border: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.black,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(15)),
                    )
                ),
              ),
            ),
          ),
          preferredSize: Size(MediaQuery.of(context).size.width, 50),
        ),
      ),
      body: Container(
        margin: EdgeInsets.only(top: 11),
        child: Column(
          children: <Widget>[
            Carousel(),
          ],
        ),
      ),
    );
  }
}

class Carousel extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CarouselState();
  }
}

class _CarouselState extends State<Carousel> {
  List<String> urls = [];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 10),
      child: Stack(
        children: <Widget>[
          Image.network(
              "someImageUrlHere."),
          Positioned(
            bottom: 5,
            width: MediaQuery.of(context).size.width - 20,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("•"),
                Text("•"),
                Text("•"),
                Text("•"),
                Text("•"),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

什么是导致此问题的问题？以及我该如何解决这个问题？

Answer 1

我对单行TextField有解决方案。将TextField放置在具有height属性的容器内（在我的情况下也是width），然后在装饰内部给contentPadding赋值为height / 2。

代码如下：

          Container(
            height: textfieldDimension,
            width: textfieldDimension,
            alignment: Alignment.center,

            child: TextField(
              decoration: InputDecoration(
                border: InputBorder.none,
                contentPadding: EdgeInsets.only(
                  bottom: textfieldDimension / 2,  // HERE THE IMPORTANT PART
                )

              ),
              // textAlignVertical: TextAlignVertical.center,  THIS DOES NOT WORK



              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 10,   // This is not so important
              ),
            ),
          ),

Answer 2

请尝试按列换行，并在'MainAxisAlignment.center'中添加'mainAxisAlignment'属性

    Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start, // If you want align text to left
          children: <Widget>[
            TextField(
                textAlignVertical: TextAlignVertical.center,
                textAlign: TextAlign.left,
                maxLines: 1,
                style: TextStyle(
                  fontSize: 13,
                ),
                decoration: InputDecoration(
                    suffixIcon: IconButton(icon: Icon(Icons.search, color: Colors.black,), onPressed: (){}),
                    border: OutlineInputBorder(
                      borderSide: BorderSide(
                        color: Colors.black,
                      ),
                      borderRadius: BorderRadius.all(Radius.circular(15)),
                    )
                ),
              ),
          ],
        ),
      )

Answer 3

日期时间很合适，但提示对齐方式和日期值不在同一位置。

if

`] 1

Answer 4

试试这个：

Container(
      height: 36,
      child: TextField(
        maxLines: 1,
        style: TextStyle(fontSize: 17),
        textAlignVertical: TextAlignVertical.center,
        decoration: InputDecoration(
          filled: true,
          prefixIcon:
              Icon(Icons.search, color: Theme.of(context).iconTheme.color),
          border: OutlineInputBorder(
              borderSide: BorderSide.none,
              borderRadius: BorderRadius.all(Radius.circular(30))),
          fillColor: Theme.of(context).inputDecorationTheme.fillColor,
          contentPadding: EdgeInsets.zero,
          hintText: 'Search',
        ),
      ),
    )

Answer 5

TextField(
   textAlign: TextAlign.center,
   decoration: InputDecoration(
     hintText: "Centered Hint",
   ),
)

希望如此会有所帮助。

在TextField Flutter中垂直居中对齐文本

5 个答案: