Question

                                      Container(
                                        alignment: Alignment.center,
                                        decoration: BoxDecoration(
                                          borderRadius: BorderRadius.only(
                                              topLeft: Radius.circular(5.0),
                                              bottomLeft: Radius.circular(5.0)
                                          ),
                                          color: Colors.white,
                                        ),
                                        padding: EdgeInsets.only(left: 15.w, right: 15.w),
                                        child: TextField(
                                          maxLines: 1,
                                          style: TextStyle(
                                            fontSize: 12, //This line!!!!!!!!!
                                            textBaseline: TextBaseline.alphabetic,
                                          ),
                                          decoration: InputDecoration(
                                            border: InputBorder.none,
                                            hintText: configNotifier.translationObject["SearchOrder"],
                                            hintStyle: TextStyle(
                                              color: fromCSSColor("#808080"),
                                              textBaseline: TextBaseline.alphabetic
                                            ),
                                          ),
                                        ),
                                      )

在我添加“fontSize: 12”之前

在我添加“fontSize: 12”之后

如何将字体大小应用于垂直居中对齐的文本字段？

备注：我试过“textAlignVertical: TextAlignVertical.center”和hint->textstyle“height:1.0”，这不起作用

========编辑 1============

IOS 设备工作正常，但不适用于型号为 SM-T295C 的三星 Galaxy Tab A（8.0 英寸，2019 年）。

========编辑 2============

使用父小部件

Container(
    margin: EdgeInsets.only(left: 70, right: 70),
    height: 50.h,
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Expanded(
          child: Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(5.0),
                  bottomLeft: Radius.circular(5.0)
              ),
              color: Colors.white,
            ),
            padding: EdgeInsets.only(left: 15.w, right: 15.w),
            child: TextField(
              maxLines: 1,
              style: TextStyle(
                fontSize: 12, //This line!!!!!!!!!
                textBaseline: TextBaseline.alphabetic,
              ),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: configNotifier.translationObject["SearchOrder"],
                hintStyle: TextStyle(
                    color: fromCSSColor("#808080"),
                    textBaseline: TextBaseline.alphabetic
                ),
              ),
            ),
          ),
        ),
        GestureDetector(
            onTap: (){
              //...
            },
            child: Container(
                width: 100.w,
                height: 50.h,
                margin: EdgeInsets.only(right: 10),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5.0),
                  color: fromCSSColor("#000000"),
                ),
                child: Center(
                  child: Text(
                    "Submit",
                    style: TextStyle(
                      color: fromCSSColor("#000000"),
                      fontSize: 12
                    ),
                    textAlign: TextAlign.center,
                  ),
                )
            )
        ),
        GestureDetector(
            onTap: (){
              //...
            },
            child: Container(
              width: 65.w,
              height: 50.h,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5.0),
                color: fromCSSColor("#000000"),
              ),
              child: Center(
                child: Container(
                  width: 41.w,
                  height: 41.h,
                  alignment: Alignment.center,
                  child: Image.asset('assets/images/icon_scan_white.png', fit: BoxFit.contain),
                ),
              ),
            )
        )
      ],
    )
)

Answer 1

尝试像下面这样在 TextField 中 textalign.center

TextField(
   textAlign : TextAlign.center,
),

你的屏幕看起来像这样 -

Answer 2

尝试 contentPadding 内部装饰。并且不需要在 padding 上使用 Expanded Container。

import 'package:flutter/material.dart';

class CounterList extends StatefulWidget {
  @override
  _CounterListState createState() => _CounterListState();
}

class _CounterListState extends State<CounterList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.red,
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ListView(
            children: [
              CustomField(
                fontSize: 17,
              ),
              SizedBox(
                height: 22,
              ),
              CustomField(
                fontSize: 37,
              ),
              SizedBox(
                height: 20,
              ),
              CustomField(
                fontSize: 11,
              ),
              SizedBox(
                height: 20,
              ),
              CustomField(
                fontSize: 22,
              ),
            ],
          ),
        ));
  }
}

class CustomField extends StatelessWidget {
  final double fontSize;
  CustomField({
    Key? key,
    required this.fontSize,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(left: 70, right: 70),
        height: 50,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5.0),
                      bottomLeft: Radius.circular(5.0)),
                  color: Colors.white,
                ),
                // padding: EdgeInsets.only(left: 15.w, right: 15.w),

                child: TextField(
                  maxLines: 1,
                  style: TextStyle(
                    fontSize: fontSize, //This line!!!!!!!!!
                    textBaseline: TextBaseline.alphabetic,
                  ),
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.only(left: 15, right: 15),
                    border: InputBorder.none,
                    hintText: "search",
                    // hintText: configNotifier.translationObject["SearchOrder"],
                    hintStyle: TextStyle(
                      // color: fromCSSColor("#808080"),
                      color: Colors.grey,
                      textBaseline: TextBaseline.alphabetic,
                    ),
                  ),
                ),
              ),
            ),
            GestureDetector(
                onTap: () {
                  //...
                },
                child: Container(
                    width: 100,
                    height: 50,
                    margin: EdgeInsets.only(right: 10),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(5.0),
                      // color: fromCSSColor("#000000"),
                      color: Colors.black,
                    ),
                    child: Center(
                      child: Text(
                        "Submit",
                        style: TextStyle(
                          // color: fromCSSColor("#000000"),
                          color: Colors.black,
                          fontSize: 12,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ))),
            GestureDetector(
                onTap: () {
                  //...
                },
                child: Container(
                  width: 65,
                  height: 50,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5.0),
                    // color: fromCSSColor("#000000"),
                    color: Colors.black,
                  ),
                  child: Center(
                    child: Container(
                      width: 41,
                      height: 41,
                      alignment: Alignment.center,
                      child: Image.asset(
                        // 'assets/images/icon_scan_white.png',
                        "assets/me.jpg",
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),
                ))
          ],
        ));
  }
}

Flutter TextField 提示文本不居中对齐

2 个答案: