Flutter-TextFormfield在UI中占用太多填充/額外空間/如何在活動/非活動時使標簽文本具有相同大小

正如您在 UI 中看到的，當我在列中使用 text 和 textformfield 時，手機號碼和 TextFormField 之間的空間太大了 -

我正在制作一個用戶界面，我希望事情是這樣的 -

所以我使用了兩種不同的方法。首先，我在 TextFormField 中使用了標簽，但是每當 TextFormField 不活動時，它看起來像這樣 -

當它處于活動狀態時，它看起來就像我想要的那樣 -

那么，我怎樣才能做到這一點，只要該欄位不處于活動狀態，它仍然應該與標簽文本類似，或者在使用帶有文本和文本欄位的列作為子項時如何減少填充以去除空白。

請參閱此處的代碼 -

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],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

嘗試使用內容填充 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,
                      ),
                    ),

輸出：

標籤：安卓 ios 扑 镖 用户界面

上一篇：未定義高度和寬度時如何為容器提供影片

下一篇：找不到Pod模塊抖動