无论我做什么，TextFormField 的下划线都不统一。如何让TextFormField的所有下划线保持统一的粗细？

Question

我是 Flutter 的新手，我在 Flutter 中构建了一个包含多个 TextFormField 和一个单选按钮的表单。但是，当单选按钮上方的文本表单字段不统一并且根据我所做的其他更改不断随机更改时，会发生一些奇怪的事情。在我的 screenshot 1 中，你可以看到前 3 个文本字段是统一的，但单选按钮后面的颜色较浅。这是我最接近实现统一文本字段下划线的方法。我已经尝试添加和删除很多东西，例如填充、大小框、容器等，它们以不同的方式影响下划线。

例如，将 Form->Column->Padding 下的 mainAxisAlignment 更改为 'start' 而不是 spaceEvenly 会导致第一个 3 个下划线的厚度按递增顺序排列，最后一个文本框很好 Check screenshot 2。我怎样才能使 TextFormFields 的所有下划线都同样粗且均匀，而不管我所做的任何其他更改？有没有比我所做的更好的方法来制作单选按钮？对于我所做的事情，颤动中是否有比单选按钮更好的元素？如果我能让单选按钮水平而不是垂直，我也会喜欢它。下划线在 chrome 中工作正常并且没有褪色，但它们在 android 模拟器 (Pixel 5 API30) 中。无论平台如何，我都希望它能正常工作。

main.dart:

    import 'package:flutter/material.dart';
    import 'package:hospital_finance_app/pages/OPD.dart';
    import 'package:hospital_finance_app/pages/login_page.dart';
    import 'package:hospital_finance_app/utils/routes.dart';
    import 'package:google_fonts/google_fonts.dart';
    
    void main() {
      runApp(const hospApp());
    }
    
    class hospApp extends StatelessWidget {
      const hospApp({Key? key}) : super(key: key);
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Login Demo',
          home: OPD(),
        );
      }
    }

OPD.dart:

    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    import 'package:hospital_finance_app/utils/routes.dart';
    
    enum paymentMethod { Cash, Other }
    
    class OPD extends StatefulWidget {
      @override
      State<OPD> createState() => _OPDState();
    }
    
    class _OPDState extends State<OPD> {
      paymentMethod? _method = paymentMethod.Cash;
    
      @override
      Widget build(BuildContext context) {
            return Material(
              child: Scaffold(
                appBar: AppBar(backgroundColor: Colors.black),
                body: Form(
                  child:Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                          TextField(
                          decoration: InputDecoration(
                            labelText: "Name",
                            hintText: "Name",
                          ),
                        ),
                        TextFormField(
                          decoration: InputDecoration(
                            hintText: "Mobile number", 
                            labelText: "Mobile Number"),
                          keyboardType: TextInputType.number,
                          inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
                          
                        ),
                        TextFormField(
                          
                          decoration: InputDecoration(
                            labelText: "Amount",
                            hintText: "Amount"),
                          keyboardType: TextInputType.number,
                          inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
                          
                        ),
                        Container(
                          child: Text("Mode of Payment", style: TextStyle(fontSize: 16, color: Colors.black54, fontFamily: "OpenSans", fontWeight: FontWeight.w400 ), textAlign: TextAlign.left),alignment: Alignment.centerLeft,),
                        Column(
                      children: <Widget>[
                        ListTile(
                          title: const Text('Cash'),
                          leading: Radio<paymentMethod>(
                            value: paymentMethod.Cash,
                            groupValue: _method,
                            onChanged: (paymentMethod? value) {
                              setState(() {
                                _method = value;
                              });
                            },
                          ),
                        ),
                        ListTile(
                          title: const Text('Other'),
                          leading: Radio<paymentMethod>(
                            value: paymentMethod.Other,
                            groupValue: _method,
                            onChanged: (paymentMethod? value) {
                              setState(() {
                                _method = value;
                              });
                            },
                          ),
                        ),
                      ],
                    ),
                         
                    TextFormField(
                      decoration: InputDecoration(labelText: "Comments/Notes",hintText: "Comments/Notes"),
                    ),
                    ElevatedButton(
                      onPressed:(){ Navigator.pushNamed(context, MyRoutes.opdRoute); },
                              child: Text("Submit"),
                              style: TextButton.styleFrom(minimumSize: Size(100,30)),)
                    ]
                ),
                  )
                      ),
              ));
      }
    }

我在 android 模拟器上使用 mainAxisAlignment spaceEvenly

的应用程序的屏幕截图

我的应用程序在 android 模拟器上的屏幕截图，启动了 mainAxisAlignment。

Answer 1

这是 android 模拟器的错误。在真实设备上尝试运行您的应用。

Answer 2

当你使用mainAxisAlignment作为'start'时，所有的TextFormField都是一个接一个的无间距放置，所以线宽增加了（两条线重叠）。相反，当您 spaceEvenly 时，TextFormFields 被分开并且线条看起来很细，原始粗细。

无论我做什么，TextFormField 的下划线都不统一。如何让TextFormField的所有下划线保持统一的粗细？

Underlines of TextFormFields in form not uniform no matter what I do. How to keep a uniform thickness for all underlines of TextFormFields?

dart

flutter

flutter-layout

flutter-web