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

我发现按钮对于我的情况来说太高了大约 8 像素，并且想将其压扁一点。

Answer 1

SizedBox 应该可以完成这项工作。用 SizedBox 包裹按钮。

来自文档：

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

这也适用于 RaishedButton

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

Answer 2

颤振2.5

OutlineButton 已弃用。相反，请使用材质按钮。 将材质按钮放入填充内。 Padding 的 padding 属性将控制按钮的高度和宽度。

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

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

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

Answer 4

颤动3.2

对于每个按钮，它的作用应该是相同的。按钮高度在

AppBar

中不适用的原因可能来自于

AppBar

本身。

向其添加

Align

小部件，使其获取您创建的按钮或小部件的高度和宽度。

AppBar(
        title: Text("Stack Overflow"),
        actions: [
          Align(
             alignment: Alignment.center,
             child: YourButton(),
          )
        ],
    )