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

Question

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

Answer 1

这里的 MyHomePage class 是您的 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();
      },
    );
  }
}

Answer 2

您可以使用 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。

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

Place an IconButton on the top right corner of your scaffold

flutter

flutter-scaffold