颤动如何为表单中的特定小部件设置边距



//这是我的主.dart文件

class UserRegistrationPage extends StatefulWidget {
     @override
  UserRegistrationPageState createState() => UserRegistrationPageState();
 }
 class UserRegistrationPageState extends State<UserRegistrationPage>{
   @override
     Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
        body: new SingleChildScrollView(
          child: new Container(
            child: new Form(
              child: formUi(),
            ),
          ),
        ),
      ),
        );
  }
  Widget formUi(){
    return new Column(
       children: <Widget>[
        new Image(
                image: new AssetImage("assets/bgtopbar.png"),
                fit: BoxFit.cover,
        ),
         new TextFormField(
                  //  margin: new EdgeInsets.all(15.0),
           decoration: new InputDecoration(hintText: 'Mobile Number'),
           keyboardType: TextInputType.phone,
           maxLength: 10,
         ),
         new TextFormField(
           decoration: new InputDecoration(hintText: 'First Name'),
           maxLength: 20, 
         ),
         new TextFormField(
           decoration: new InputDecoration(hintText: 'Last Name'),
           maxLength: 20,
         ),
         new TextFormField(
           decoration: new InputDecoration(hintText: 'Gender'),
           maxLength: 10,
         ),
       ],
    );
  }

只想在我不想为图像设置的表单中设置编辑文本字段的边距。我如何在表单中为单个小部件提供边距.我知道这个问题非常简单,但我是 Flutter 的新手,所以请帮助我解决这个问题

创建下面的方法并根据需要设置边距

Widget allTextFieldWithMargin(){
    return Container(
    margin: new EdgeInsets.all(15.0), // Or set whatever you want 
    child: Column(
        children: <Widget>[
          new TextFormField(
            //  margin: new EdgeInsets.all(15.0),
            decoration: new InputDecoration(hintText: 'Mobile Number'),
            keyboardType: TextInputType.phone,
            maxLength: 10,
          ),
          new TextFormField(
            decoration: new InputDecoration(hintText: 'First Name'),
            maxLength: 20,
          ),
          new TextFormField(
            decoration: new InputDecoration(hintText: 'Last Name'),
            maxLength: 20,
          ),
          new TextFormField(
            decoration: new InputDecoration(hintText: 'Gender'),
            maxLength: 10,
          ),
        ],
      ),
    );
   }

并调用 allTextFieldWithMargin 方法,如 belwo

 Widget formUi(){
    return new Column(
      children: <Widget>[
        new Image(
          image: new AssetImage("assets/bgtopbar.png"),
          fit: BoxFit.cover,
        ),
       allTextFieldWithMargin()
      ],
    );
  }

你可以用Container包装它

Container(
  margin: EdgeInsets.all(4.0),
  child: yourWidget,
);

上级:

如果您只想设置水平边距 - 您可以组织小部件,例如:

Column
  Image
  Container
    Column
      TextFormField
      TextFormField
      TextFormField
      TextFormField

最新更新