如何在文本字段之间进行填充

Question

在此处输入图像描述我想在此之间进行填充

集装箱(

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)),
),
),
),

这是我的代码，它在侧边填充中工作，但我希望在文本字段中填充我开始在颤动

这是我的代码，它在侧面填充中工作，但我想在flutter 中的文本字段中填充

这是我的代码，它在侧面填充中工作，但我想在flutter 中的文本字段中填充

],
),
),

Answer 1

在TextField中填充是什么意思？TextFields内部的填充在我看来是正确的，也许你想说你想在TextFields之间添加某种间距？如果是这样的话，你有多种选择，我认为这是最简单的一种：

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)
...

您甚至可以尝试在_CustomTextField中添加SizedBox！

Answer 2

用Container小部件包装每个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),
),),),

Answer 3

1. 如果您想在TextField中使用内部填充，则可以使用"内容填充">内部InputDecoratation(contentPadding : EdgeInseta.all(6))

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

2. 如果您想要绕过TextField或TextFormField

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*"),
),
);