flutter - 在颤振中嵌套脚手架以实现滑块

Question

我想使用自定义滑块而不是 Material Design 抽屉。

默认抽屉不占用脚手架中的任何空间，并被推到布局上。我想要一个导航栏，就像这个网站的桌面版本一样。

因此，我将一个脚手架嵌套在另一个脚手架内，以便在内部脚手架内进行导航。

这是我的代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var show = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multi Scaffold',
      home: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: const Icon(Icons.menu),
            onPressed: () {
              setState(() {
                show = !show;
              });
            },
          ),
          title: const Text("App"),
        ),
        body: InsideWidget(show: show),
      ),
    );
  }
}

class InsideWidget extends StatelessWidget {
  const InsideWidget({
    Key? key,
    required this.show,
  }) : super(key: key);

  final bool show;

  @override
  Widget build(BuildContext context) {
    var w = MediaQuery.of(context).size.width;
    var h = MediaQuery.of(context).size.height;
    return Row(
      children: [
        show
            ? SizedBox(
                width: 0.2 * w,
                height: h,
                child: Drawer(
                    child: Container(
                  decoration: BoxDecoration(boxShadow: [
                    BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 5,
                      blurRadius: 7,
                      offset: const Offset(0, 3),
                    )
                  ]),
                  child: ListView(
                    children: const [
                      DrawerHeader(child: Text("Iman")),
                      ListTile(
                        leading: Icon(Icons.ac_unit),
                        title: Text("Home"),
                      ),
                      Divider(),
                      ListTile(
                        leading: Icon(Icons.vertical_distribute_rounded),
                        title: Text("Home3"),
                      ),
                    ],
                  ),
                )),
              )
            : Container(),
        SizedBox(
          width: show ? 0.8 * w : w,
          height: h,
          child: const Scaffold(
              backgroundColor: Colors.yellow,
              body:
                  SizedBox(width: 100, child: Center(child: Text("Content")))),
        ),
      ],
    );
  }
}

从 Flutter 文档开始，不建议使用嵌套脚手架。

我想知道这是否是最佳实践，或者是否存在实现此行为的更好方法。

标签： flutter