Flutter如何在AppBar中修改OutlineButton的高度？

Question

我想知道如何更改OutlineButton的高度，这可能也适用于其他按钮类型。

return Scaffold(
  appBar: AppBar(
    title: Text('Test'),
    actions: <Widget> [
      SizedBox(
        width: 100.0,
        height: 8.0,
        child: OutlineButton(
          borderSide: BorderSide(width: 4.0)
          child: Text('Hi'),
          onPressed: (){},
        ),
      ),
    ],
   ),
  body: Container(),
);

我发现在我的情况下，这个按钮的位置高了大约8px，我想把它压缩一点。

- Jus10

Answer 1

SizedBox 可以解决问题。将按钮用 SizedBox 包裹起来。

来自文档：

如果给定了 child，该小部件会强制其子项具有特定的宽度和/或高度（假设此小部件的父级允许这些值）。 如果宽度或高度为 null，则此小部件将在该维度上调整大小以匹配子项的大小。 如果没有给定 child，则此小部件将根据给定的宽度和高度调整大小，将 null 视为零。

对于 RaisedButton 也适用。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Layout',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("SizedBox Demo"),
      ),
      body: new Center(
        child: new SizedBox(
          width: 200.0,
          height: 80.0,
          child: new OutlineButton(
              borderSide: BorderSide(width: 4.0),
              child: Text('I am a button'),
              onPressed: (() {})),
        ),
      ),
    );
  }
}

更新（2018/05/26）：

如果您想要减小位于AppBar内部的OutlineButton的高度，请使用Padding。

return Scaffold(
  appBar: AppBar(
    title: Text('Test'),
    actions: <Widget> [
      Padding(
        child: OutlineButton(
          borderSide: BorderSide(width: 4.0)
          child: Text('Hi'),
          onPressed: (){},
          padding: EdgeInsets.all(10.0),
        ),
      ),
    ],
   ),
  body: Container(),
);

- Phuc Tran

---

这使我能够调整宽度，但出于某种原因，高度没有改变。 - Jus10

更新了代码。我猜问题可能是因为它在 AppBar 中。我没有想到这会影响它，但看起来确实如此。它锁定了高度。 - Jus10

我也更新了AppBar的答案。希望能有所帮助。 - Phuc Tran

Answer 2

Flutter 2.5

OutlineButton已被弃用，应使用Material Button代替。

将Material Button放在Padding内，Padding的padding属性会控制按钮的高度和宽度。

AppBar(
        title: Text("Stack Overflow"),
        actions: [
          Padding(
            padding: EdgeInsets.all(8.0),
            child: MaterialButton(
              color: Colors.yellow,
              onPressed: () {

              },
              child: Text('SUBMIT'),
            ),
          )
        ],
    )

- shahil

Answer 3

感谢@phuc-tran，我进行了小修复：

return Scaffold(
  appBar: AppBar(
    title: Text('Test'),
    actions: <Widget> [
      Padding(
        padding: EdgeInsets.all(10.0),
        child: OutlineButton(
          borderSide: BorderSide(color: Colors.blue),
          child: Text('Hi'),
          onPressed: (){},
        ),
      ),
    ],
   ),
  body: Container(),
);

- RodolfoSilva