在腳手架的右上角放置一個 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 class 是您的腳手架所需的 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();
      },
    );
  }
}