Flutter - TextFormfield 在 UI/How 中占用了太多 padding/extra space，以至于在 active/inactive 时使标签文本大小相同

Question

正如您在 UI 中看到的，当我在列中使用 text 和 textformfield 时，手机号码和 TextFormField 之间的 space 太多了 -

我正在制作一个 UI，我希望其中的内容是这样的 -

所以我使用了两种不同的方法。首先，我在 TextFormField 中使用了标签，但每当 TextFormField 不活动时，它看起来像这样 -

并且当它处于活动状态时，它看起来非常像我想要的 -

那么，我怎样才能做到这一点，无论何时字段不活动，标签文本都应该看起来像这样，或者如何减少填充以删除白色 space 使用列时文本和文本字段作为 children.

代码参考这里-

class HelpPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Help'),
          backgroundColor: colorPrimary,
          centerTitle: true,
        ),
        body: Column(
          children: [
            ListTile(
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'PNR/Booking Id',
                        style: TextStyle(
                          color: popUpLightTextColor,
                        ),
                      ),
                      Text(
                        'AWP80A',
                        style: TextStyle(
                          fontSize: 16.0
                        ),
                      ),
                    ],
                  ),
                  Column(
                    children: [
                      Text(
                        'Seats',
                        style: TextStyle(
                          color: popUpLightTextColor,
                        ),
                      ),
                      Text(
                        'UD8',
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 4.0),
              child: Container(
                height: 1.0,
                width: double.infinity, //MediaQuery.of(context).size.width,
                color: Colors.grey[300],
              ),
            ),
            ListTile(
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Origin',
                        style: TextStyle(
                          color: popUpLightTextColor,
                        ),
                      ),
                      Text(
                        'New Delhi',
                        style: TextStyle(
                            fontSize: 16.0
                        ),
                      ),
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        'Destination',
                        style: TextStyle(
                          color: popUpLightTextColor,
                        ),
                      ),
                      Text(
                        'Mathura',
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 4.0),
              child: Container(
                height: 1.0,
                width: double.infinity, //MediaQuery.of(context).size.width,
                color: Colors.grey[300],
              ),
            ),
            ListTile(
              title: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'Name*',
                    style: TextStyle(
                      color: popUpLightTextColor,
                    ),
                  ),
                  Text(
                    'Kirti Agarwal',
                    style: TextStyle(
                        fontSize: 16.0
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 4.0),
              child: Container(
                height: 1.0,
                width: double.infinity, //MediaQuery.of(context).size.width,
                color: Colors.grey[300],
              ),
            ),
            ListTile(
              title: Container(
                width: MediaQuery.of(context).size.width*0.7,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    /*Text(
                      'Mobile Number*',
                      style: TextStyle(
                        color: popUpLightTextColor,
                      ),
                    ),*/
                    TextFormField(
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        label: Text('Mobile Number*', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500, fontSize: 20),)
                      ),
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 17,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 4.0),
              child: Container(
                height: 1.0,
                width: double.infinity, //MediaQuery.of(context).size.width,
                color: Colors.grey[300],
              ),
            ),
            ListTile(
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Origin',
                        style: TextStyle(
                          color: popUpLightTextColor,
                        ),
                      ),
                      Text(
                        'New Delhi',
                        style: TextStyle(
                            fontSize: 16.0
                        ),
                      ),
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        'Destination',
                        style: TextStyle(
                          color: popUpLightTextColor,
                        ),
                      ),
                      Text(
                        'Mathura',
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 4.0),
              child: Container(
                height: 1.0,
                width: double.infinity, //MediaQuery.of(context).size.width,
                color: Colors.grey[300],
              ),
            ),
            ListTile(
              title: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Origin',
                        style: TextStyle(
                          color: popUpLightTextColor,
                        ),
                      ),
                      Text(
                        'New Delhi',
                        style: TextStyle(
                            fontSize: 16.0
                        ),
                      ),
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        'Destination',
                        style: TextStyle(
                          color: popUpLightTextColor,
                        ),
                      ),
                      Text(
                        'Mathura',
                      ),
                    ],
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 4.0),
              child: Container(
                height: 1.0,
                width: double.infinity, //MediaQuery.of(context).size.width,
                color: Colors.grey[300],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

尝试使用内容填充 textformfield 内容填充

TextFormField(
                      decoration: InputDecoration(
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.symmetric(vertical: 5), // adjust as you need 
                          label: Text('Mobile Number*', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500, fontSize: 20),)
                      ),
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 17,
                      ),
                    ),

输出：