如何在Flutter中为按钮设置边距

Question

我正在使用Flutter创建一个表单，但是我无法为按钮设置顶部边距。

class _MyHomePageState extends State<MyHomePage> {

String firstname; 
String lastname;
final scaffoldKey = new GlobalKey<ScaffoldState>();
final formKey = new GlobalKey<FormState>();


    @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: scaffoldKey,
      appBar: new AppBar(
        title: new Text('Validating forms'),
      ),
      body: new Padding(
        padding: const EdgeInsets.all(16.0),
        child: new Form(
          key: formKey,
          child: new Column(
            children: [
              new TextFormField(
                decoration: new InputDecoration(labelText: 'First Name'),
                validator: (val) =>
                    val.length == 0 ?"Enter FirstName" : null,
                onSaved: (val) => firstname = val,
              ),
              new TextFormField(
                decoration: new InputDecoration(labelText: 'Password'),
                validator: (val) =>
                    val.length ==0 ? 'Enter LastName' : null,
                onSaved: (val) => lastname = val,
                obscureText: true,
              ),
              new RaisedButton(
                onPressed: _submit,
                child: new Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }

- Raja Jawahar

Answer 1

将您的按钮放在 Container 内，然后设置margin即可

Container(
    margin: const EdgeInsets.only(top: 10.0),
    child : RaisedButton(
                onPressed: _submit,
                child: Text('Login'),
              ),

- Raouf Rahiche

Answer 2

你也可以使用Padding来包装你的按钮（这就是Container在内部所做的）。

Padding(
  padding: const EdgeInsets.all(20),
  child: ElevatedButton(
    onPressed: _submit,
    child: Text('Login'),
  ),
);

查看此答案以了解如何为小部件添加边距。

注意：自Flutter 2.0起，RaisedButton已被弃用，ElevatedButton是替代品。

- Suragch

---

这应该是被接受的答案，因为Padding可以标记为const，而Container则不行。 - Adam Smaka

@AdamSmaka 出于好奇 - 将某些东西标记为const的优点是什么？ - Diana

@Diana，这个值只会被构建一次，因此应用程序的性能会更好。 - Adam Smaka

Answer 3

在Flutter 2.0中，RaisedButton已被弃用，ElevatedButton是其替代品。
因此，您可以使用ElevatedButton并将样式设置为以下内容以去除边距：

      ElevatedButton.icon(
        onPressed: () {},
        icon: Icon(Icons.add),
        label: Text(
          'Add Place',
        ),
        style: ButtonStyle(tapTargetSize: MaterialTapTargetSize.shrinkWrap),
      ),

- Trung Đoan

Answer 4

图片上边距：

        Scaffold(
      backgroundColor: Color.fromARGB(255, 238, 237, 237),
      body: Center(
        child: Container(
          margin: const EdgeInsets.only(top: 25),
          child: Column(
            children: <Widget>[
              Column(children: <Widget>[
                Image.asset(
                  'images/logo.png',
                  fit: BoxFit.contain,
                  width: 130,
                )
              ]),
              
            ],
          ),
        ),
      ),
    )

- mirazimi

Answer 5

这对我很有帮助！

ElevatedButton(
   style: ElevatedButton.styleFrom(
     primary: Global.deepOrange,
     padding: const EdgeInsets.all(20), // at this line you can add margin.
              ),
  onPressed: () {},
    child: const Text('Add New Poll Item')),

- Adie RT

Answer 6

截图：

使用建议的 ElevatedButton.style 属性来提供填充。

ElevatedButton(
  onPressed: () {},
  child: Text('Button'),
  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.all(20), // Set padding
  ),
)

- CopsOnRoad

Answer 7

我找到了EdgeInsets.symmetric：

child : new RaisedButton(
   onPressed: _submit,
   child: new Text('Login'),
   padding: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
),

- Wendel

Answer 8

这是我通常设置小部件尺寸、填充和边距的方式。以下是按钮(Button)的示例：

   Container(
          margin: EdgeInsets.only(top: 10), // Top Margin
          child:
            ElevatedButton(
              style: TextButton.styleFrom(

                // Inside Padding 
                padding: EdgeInsets.symmetric(horizontal: 0, vertical: 20), 

                // Width,Height
                minimumSize: Size(300, 30), 
              ),
              child: Text('Upload Data'),
              onPressed: () {submitForm();},
            ),
        ),

其他选项包括：

Container(
          margin: EdgeInsets.only(top:20),
          child:
            ElevatedButton(

设置水平和垂直边距

Container(
margin: EdgeInsets.symmetric(horizontal: 0, vertical: 20),
child:

Container(
          margin: EdgeInsets.all(20),
          child:
            ElevatedButton(

Container(
          margin: EdgeInsets.fromLTRB(5,10,5,10),
          child:
            ElevatedButton(

- Hitesh Sahu

Answer 9

Margin和Padding不是同一件事情，我觉得在一些评论中它们被交替使用了。

Margin控制小部件边框外到其边缘的间距。 Padding控制其边缘到其子元素的间距。

对于ElevatedButton小部件，trung's的答案是正确的，在按钮样式中更改tapTargetSize即可。

- Nathan Agersea

---

这应该是一条评论，而不是另一个答案，抱歉。 - Nathan Agersea

Answer 10

您可以像这样在 卡片 上使用 边距（margin） 和 内边距（padding）：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.builder(
          itemCount: _newsArticles.length,
          padding:  EdgeInsets.symmetric(horizontal: 2,vertical: 2),
          itemBuilder: (context, index) {
            return Card( // <-- Card widget
              shadowColor: Colors.grey,
              elevation: 3,
              margin: EdgeInsets.all(5.0),
              child: ListTile(
                title: _newsArticles[index].urlToImage == null ?
                Image.asset(Constants.NEWS_PLACEHOLDER_IMAGE_ASSET_URL) :
                Image.network(_newsArticles[index].urlToImage),
                subtitle: Text(_newsArticles[index].title, style: TextStyle(fontSize: 14)),
              ),
            );
          },
        )
    );
  }

- Rahul Kushwaha