在脚手架的右上角放置一个 IconButton答案

【问题标题】：Place an IconButton on the top right corner of your scaffold在脚手架的右上角放置一个 IconButton
【发布时间】：2020-06-24 19:03:06
【问题描述】：

我想在我的 Scaffold 的右上角放置一个图标按钮，以编程方式打开一个抽屉。它应该是每个显示类型的右上角。使用 appbar 会破坏页面的外观，因为我只需要一个显示抽屉可用的小图标。我如何以最好的方式做到这一点？我的脚手架是默认的。我怎样才能以最好的方式实现这一目标？

【问题讨论】：

标签： flutter flutter-scaffold

【解决方案1】：

您可以使用 Stack 来实现此目的。用 Stack 小部件包裹 Scaffold 的主体，并使用 Positioned 小部件作为堆栈的第一个子级。

GlobalKey<ScaffoldState> _scafKey = GlobalKey();

 @override
Widget build(BuildContext context) {

return SafeArea(
    child: Scaffold(
      key: _scafKey,
      drawer: YourDrawerWidget(),
      body: Stack(
        children: <Widget>[
          Positioned(
              top: 0,
              right: 0,
              child: IconButton(
                  icon: Icon(Icons.short_text),
                  onPressed: (){
                    _scafKey.currentState.openDrawer();
                  })),
          Container(),
       ],
     ),
   ),
 );
}

用您的小部件（脚手架的原始主体）替换容器。

还有 IconButton 的图标到你的 Icon。

【讨论】：

【解决方案2】：

这里的 MyHomePage 类是您的 Scaffold 所需的 AppBar。您需要做的就是更改图标。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: MyHomePage(),
        drawer: Container(
          width: 100,
          color: Colors.red,
        ),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        color: Colors.transparent,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            AppBarAction(),
          ],
        ),
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(60);
}

class AppBarAction extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.print),
      onPressed: () {
        Scaffold.of(context).openDrawer();
      },
    );
  }
}

【讨论】：

如果我理解正确，您的代码会使主页上的应用栏透明，除了抽屉图标？这样做不会占用额外的空间吗？