flutter - 在脚手架的右上角放置一个 IconButton

Question

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

Answer 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 的图标到您的图标。

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