Flutter中如何为按钮设置外边距？表单开发按钮上边距设置问题

嗨，我来帮你搞定按钮没法设置上边距的问题～在Flutter里有好几种简单的方法可以实现，我结合你的代码片段给你演示下：

方法1：用Padding组件包裹按钮 #

这是最直观的方式，直接给按钮外层套一个Padding组件，指定top方向的内边距就行：

class _MyHomePageState extends State<MyHomePage> {
  String? firstname;
  String? lastname;
  final scaffoldKey = GlobalKey<ScaffoldState>();
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: const Text('Validating forms'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: formKey,
          child: Column(
            children: [
              // 你的表单输入框示例
              TextFormField(
                decoration: const InputDecoration(labelText: 'First Name'),
                onSaved: (val) => firstname = val,
              ),
              TextFormField(
                decoration: const InputDecoration(labelText: 'Last Name'),
                onSaved: (val) => lastname = val,
              ),
              // 给按钮加上边距的核心代码
              const Padding(
                padding: EdgeInsets.only(top: 20.0), // 这里设置你想要的上边距大小
                child: ElevatedButton(
                  onPressed: null, // 替换成你的按钮点击逻辑
                  child: Text('Submit'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

方法2：用Container的margin属性 #

把按钮放在Container里，通过margin属性设置上边距，这种方式适合需要同时设置多个方向边距的场景：

// 替换方法1里的Padding包裹部分，改成下面的Container
Container(
  margin: const EdgeInsets.only(top: 20.0),
  child: ElevatedButton(
    onPressed: null,
    child: const Text('Submit'),
  ),
),

方法3：用SizedBox占位 #

如果只是想在按钮上方留出空白，直接在按钮前面加一个SizedBox组件，指定高度即可：

// 在按钮前添加SizedBox
const SizedBox(height: 20.0),
ElevatedButton(
  onPressed: null,
  child: const Text('Submit'),
),

这几种方法都能轻松实现按钮的上边距效果，你可以根据自己的布局需求选一种就行～

内容的提问来源于stack exchange，提问作者Raja Jawahar