无论我做什么，表单中 TextFormFields 的下划线都不统一。如何保持 TextFormFields 的所有下划线的粗细一致？

Question

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

例如，将Form->Column->Padding 下的mainAxisAlignment 更改为'start' 而不是spaceEvenly 会导致第1 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)),)
                    ]
                ),
                  )
                      ),
              ));
      }
    }

我的应用程序在带有 mainAxisAlignment spaceEvenly 的 android 模拟器上的屏幕截图

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

Answer 1

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

Answer 2

当您使用 mainAxisAlignment 作为 'start' 时，所有 TextFormFields 一个接一个地放置，它们之间没有任何间距，因此线条粗细增加（两条线重叠）。 相反，当你 spaceEvenly 时，TextFormFields 被分开，线条看起来很细，原来的粗细。