Question

只是想知道如何更改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(), );的高度？我想这也可能适用于其他按钮类型。

board=[["R1W","C1W","F1W","K1W","D1W","F2W","C2W","R2W"],
       ["P1W","P2W","P3W","P4W","P5W","P6W","P7W","P8W"],
       ["___","___","___","___","___","___","___","___"],
       ["___","___","___","___","___","___","___","___"],
       ["___","___","___","___","___","___","___","___"],
       ["___","___","___","___","___","___","___","___"],
       ["P1N","P2N","P3N","P4N","P5N","P6N","P7N","P8N"],
       ["R1N","C1N","F1N","D1N","K1N","F2N","C2N","R2N"]]

我发现按钮大约8px对我的情况来说太高了，并想稍微挤压它。

Answer 1

SizedBox应该做的工作。用SizedBox包裹你的按钮。

来自文件：

如果给孩子，这个小部件会强制其子项具有特定的宽度和/或高度（假设此小部件的父级允许值）。如果宽度或高度为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(),
);

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

Flutter在AppBar中更改OutlineButton的高度？

2 个答案: