flutter 如何在文本字段之间填充

72qzrwbm 于 2023-01-21 发布在 Flutter

关注(0)|答案(3)|浏览(122)

enter image description here我想在这之间填充
集装箱（

child: Column(
                    children: \<Widget\>\[
                      
                      //  Radio(value: 1, groupValue: 'Null', onChanged: (index) {}),
                      // Expanded(
                      //   child: Text('A domicile'),
                      // ),
                      // Radio(value: 1, groupValue: 'Null', onChanged: (index) {}),
                      // Expanded(
                      //   child: Text('En consigne'),
                      // ),

                      TextField(
                        
                        decoration: InputDecoration(
                          
                          
                          labelText: '  Ref Expedéteur',
                          labelStyle: TextStyle(
                            color: Color.fromARGB(255, 0, 0, 0),
                            fontFamily: 'Segoe UI',
                          ),
                          enabledBorder: OutlineInputBorder(
                            
                            borderSide: BorderSide(
                              
                                width: 3,
                                color: Color.fromARGB(255, 136, 136, 136)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                           
                            borderSide: BorderSide(
                                width: 3, color: const Color(0xffff4848)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 66, 125, 145)),
                          ),
                        ),
                      
                      ),
                      TextField(
                        decoration: InputDecoration(
                          labelText: '  Nombre de colis',
                          labelStyle: TextStyle(
                            color: Color.fromARGB(255, 0, 0, 0),
                            fontFamily: 'Segoe UI',
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 136, 136, 136)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3, color: const Color(0xffff4848)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 66, 125, 145)),
                          ),
                        ),
                      ),
                      TextField(
                        decoration: InputDecoration(
                          labelText: '  Poids',
                          labelStyle: TextStyle(
                            color: Color.fromARGB(255, 0, 0, 0),
                            fontFamily: 'Segoe UI',
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 136, 136, 136)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                              width: 3,
                              color: const Color(0xffff4848),
                            ),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 66, 125, 145)),
                          ),
                        ),
                      ),
                      TextField(
                        decoration: InputDecoration(
                          labelText: '  Taille de colis',
                          labelStyle: TextStyle(
                            color: Color.fromARGB(255, 0, 0, 0),
                            fontFamily: 'Segoe UI',
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 2,
                                color: Color.fromARGB(255, 136, 136, 136)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 2, color: const Color(0xffff4848)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 2,
                                color: Color.fromARGB(255, 66, 125, 145)),
                          ),
                        ),
                      ),

                      // Padding(padding: const EdgeInsets.all(2.0),
                      // child:Column(
                      //   children: \[
                      //        Radio(value: 1, groupValue: 'Null', onChanged: (index) {}),
                      //   Expanded(
                      //   child: Text('Paye'),
                      // ),
                      //   \],
                      // ),
                      // ),
                      TextField(
                        decoration: InputDecoration(
                          labelText: '  Ref Expedéteur',
                          labelStyle: TextStyle(
                            color: Color.fromARGB(255, 5, 5, 5),
                            fontFamily: 'Segoe UI',
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 136, 136, 136)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3, color: const Color(0xffff4848)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 66, 125, 145)),
                          ),
                        ),
                      ),
                      TextField(
                        decoration: InputDecoration(
                          labelText: '  Nombre de colis',
                          labelStyle: TextStyle(
                            color: Color.fromARGB(255, 0, 0, 0),
                            fontFamily: 'Segoe UI',
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 136, 136, 136)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3, color: const Color(0xffff4848)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 66, 125, 145)),
                          ),
                        ),
                      ),
                      TextField(
                        decoration: InputDecoration(
                          labelText: '  Poids',
                          labelStyle: TextStyle(
                            color: Color.fromARGB(255, 0, 0, 0),
                            fontFamily: 'Segoe UI',
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 136, 136, 136)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3, color: const Color(0xffff4848)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 66, 125, 145)),
                          ),
                        ),
                      ),
                      TextField(
                        decoration: InputDecoration(
                          labelText: '  Taille de colis',
                          labelStyle: TextStyle(
                            color: Color.fromARGB(255, 0, 0, 0),
                            fontFamily: 'Segoe UI',
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 136, 136, 136)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3, color: const Color(0xffff4848)),
                            borderRadius: BorderRadius.all(
                              Radius.circular(40),
                            ),
                          ),
                          errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                                width: 3,
                                color: Color.fromARGB(255, 66, 125, 145)),
                          ),
                        ),
                      ),

这是我的代码，它的工作在侧填充，但我想填充内文本字段即时通讯begginner在Flutter
这是我的代码，它的工作在侧填充，但我想填充内文本字段即时通讯begginner在Flutter
这是我的代码，它的工作在侧填充，但我想填充内文本字段即时通讯begginner在Flutter

\],
                  ),
                ),

flutter

来源：https://stackoverflow.com/questions/74265240/how-to-make-padding-between-textfield

3条答案

按热度按时间

k7fdbhmy1#

你说的文本字段内填充是什么意思？在我看来，文本字段内的填充是正确的，也许你是想说你想在文本字段之间添加某种间距？如果是这样的话，你有多种选择，我发现这是最简单的一种：

TextField(...)
SizedBox(height: 12)
TextField(...)
SizedBox(height: 12)
...

你明白我的意思...
我还建议您将这些TextField小部件提取到一个接收X个参数的私有小部件中，这样您就可以避免重复这么多代码，并且一切看起来都更干净、更可读。
比如：

class _CustomTextField extends StatelessWidget {
  const _CustomTextField({
    Key? key,
    required this.label,
  }) : super(key: key);

  final String label;

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        labelText: label,
        labelStyle: const TextStyle(
          color: Color.fromARGB(255, 5, 5, 5),
          fontFamily: 'Segoe UI',
        ),
        enabledBorder: const OutlineInputBorder(
          borderSide: BorderSide(
            width: 3,
            color: Color.fromARGB(255, 136, 136, 136),
          ),
          borderRadius: BorderRadius.all(Radius.circular(40)),
        ),
        focusedBorder: const OutlineInputBorder(
          borderSide: BorderSide(width: 3, color: Color(0xffff4848)),
          borderRadius: BorderRadius.all(Radius.circular(40)),
        ),
        errorBorder: const OutlineInputBorder(
          borderSide: BorderSide(
            width: 3,
            color: Color.fromARGB(255, 66, 125, 145),
          ),
        ),
      ),
    );
  }
}

然后你这样使用它：

_CustomTextField(label: 'Label 1')
SizedBox(height: 12)
_CustomTextField(label: 'Label 2')
SizedBox(height: 12)
...

您甚至可以尝试将SizedBox添加到_CustomTextField中!

赞(0）回复(0）举报 2023-01-21

wz3gfoph2#

用Container小部件 Package 每个TextField小部件，并按如下方式指定所需的边距和填充：

Container(
     margin: EdgeInsets.symmetric(vertical: 10.0), // 10 vertical margin
      TextField(
       decoration: InputDecoration(
         labelText: '  Taille de colis',
         labelStyle: TextStyle
         color: Color.fromARGB(255, 0, 0, 0),
         fontFamily: 'Segoe UI',
          ),
         enabledBorder: OutlineInputBorder(
         borderSide: BorderSide(
         width: 3,
         color: Color.fromARGB(255, 136, 136, 136)),
         borderRadius: BorderRadius.all(
         Radius.circular(40),
          ),),),

赞(0）回复(0）举报 2023-01-21

toiithl63#

1.如果要在TextField中进行内部填充，则可以在InputDecoratation中使用**“contentpadding”**（contentPadding：边缘插入全部（6））

textAlign: TextAlign.left,
 decoration: InputDecoration(
   hintText: 'Enter Something',
   contentPadding: EdgeInsets.all(20.0),
 ),
)```

2. And you want around of **TextField**  or  **TextFormField**  then you can Wrap with Padding Widget example.

  

```Padding(
         padding: const EdgeInsets.all(8.0),
          child: TextFormField(
           autofocus: false,
            enableSuggestions: true,
            autocorrect: true,
            style: const TextStyle(
               fontFamily: fontFamilySourceSansPro, color: black, fontSize: 16),
           validator: validateCustomerAddress,
           controller: _cusAdd2,
            focusNode: _nodeCusAdd2,
            autovalidateMode: autoValidateMode,
            keyboardType: TextInputType.streetAddress,
           textInputAction: TextInputAction.next,
            decoration: getTextFieldBorderLightGrayDecoration("Address 2*"),
          ),
        );```

赞(0）回复(0）举报 2023-01-21

我来回答

flutter 如何在文本字段之间填充

3条答案

相关问题

热门标签

最新问答