Flutter 如何在 TextFormField 中添加填充？

Question

我希望標題足以理解我想要什么，如何在 TextFormField 中添加填充和邊距？ 請參閱下面的圖片了解更多信息。 謝謝

      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.asset('assets/images/logo.png'),
          TextFormField(
            decoration: InputDecoration(
                fillColor: Colors.white,
                filled: true,
                border: new OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(10.0),
                  ),
                ),
                labelText: 'Enter your username'),
          ),
          TextFormField(
            decoration: InputDecoration(
                fillColor: Colors.white,
                filled: true,
                border: new OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(10.0),
                  ),
                ),
                labelText: 'Enter your password'),
          ),
        ],
      )

Answer 1

您可以使用幾種方法來增加與它們的距離：

1. SizedBox()

2. Padding()

3. Container(margin, child: ...)

1- SizedBox() ：

child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.asset('assets/images/logo.png'),
          TextFormField(
            decoration: InputDecoration(
                fillColor: Colors.white,
                filled: true,
                border: new OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(10.0),
                  ),
                ),
                labelText: 'Enter your username'),
          ),
          SizedBox(height:10), // will add 10 pixels 
          TextFormField(
            decoration: InputDecoration(
                fillColor: Colors.white,
                filled: true,
                border: new OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(10.0),
                  ),
                ),
                labelText: 'Enter your password'),
          ),
        ],
      )

2- Padding()

 Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              decoration: InputDecoration(
                  fillColor: Colors.white,
                  filled: true,
                  border: new OutlineInputBorder(
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(10.0),
                    ),
                  ),
                  labelText: 'Enter your username'),
            ),
          ),

3- Container()

     Container(
        margin: EdgeInsets.only(top: 15),
        child: TextFormField(
        decoration: InputDecoration(
          fillColor: Colors.white,
          filled: true,
          border: new OutlineInputBorder(
            borderRadius: const BorderRadius.all(
              const Radius.circular(10.0),
            ),
          ),
          labelText: 'Enter your password'),
  ),
      ),

Answer 2

請將 TextFormField 包裝在 Container 中，並根據您的 ui 將邊距設置為上、左、右、下。 請檢查一下，如果這是正確的，請告訴我。

Container(
                margin: EdgeInsets.only(top: 10,left: 0,right: 0,bottom: 0),
                child: TextFormField(
            decoration: InputDecoration(
                  fillColor: Colors.white,
                  filled: true,
                  border: new OutlineInputBorder(
                    borderRadius: const BorderRadius.all(
                      const Radius.circular(10.0),
                    ),
                  ),
                  labelText: 'Enter your password'),
          ),
              ),

Answer 3

要應用水平填充，只需在Column上方添加Padding小部件：

Padding(
  padding: EdgeInsets.symmetric(horizontal: 16.0),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Image.asset('assets/images/logo.png'),
      // your text fields
    ],
...

要添加垂直填充，請在Column內使用SizedBox ：

child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.asset('assets/images/logo.png'),
          TextFormField1(...),
          SizedBox(height: 24.0),
          TextFormField2(...),
          SizedBox(height: 24.0),
        ],
      )

Answer 4

您可以添加大小框。

 TextFormField(
            decoration: InputDecoration(
                fillColor: Colors.white,
                filled: true,
                border: new OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(10.0),
                  ),
                ),
                labelText: 'Enter your username'),
          ),
          SizedBox(height: 10),
          TextFormField(
            decoration: InputDecoration(
                fillColor: Colors.white,
                filled: true,
                border: new OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(10.0),
                  ),
                ),
                labelText: 'Enter your password'),
          ),

Answer 5

您可以在 textformfield 之間插入 sizedbox，例如：-

child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.asset('assets/images/logo.png'),
          TextFormField(
            decoration: InputDecoration(
                fillColor: Colors.white,
                filled: true,
                border: new OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(10.0),
                  ),
                ),
                labelText: 'Enter your username'),
          ),
          SizedBox(height:30), // will add 30 pixels gap in between the fields
          TextFormField(
            decoration: InputDecoration(
                fillColor: Colors.white,
                filled: true,
                border: new OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(10.0),
                  ),
                ),
                labelText: 'Enter your password'),
          ),
        ],
      )

Answer 6

InputDecoration 采用 contentPadding 值。 直接用就行了。