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 包裹你的按钮。

来自文档：

If given a child, this widget forces its child to have a specific width and/or height (assuming values are permitted by this widget's parent). If either the width or height is null, this widget will size itself to match the child's size in that dimension. If not given a child, this widget will size itself to the given width and height, treating nulls as zero.

这也适用于 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(),
);

Answer 2

谢谢@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 3

颤振 2.5

OutlineButton 已弃用。相反，请使用 Material 按钮。将 Material 按钮放在 Padding 中。 Padding的padding属性会控制按钮的高度和宽度。

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

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

Flutter 更改 AppBar 内 OutlineButton 的高度？

Flutter Change height of an OutlineButton inside an AppBar?

button

height

flutter