dart 如何保持抽屉始终打开

7vhp5slm  于 2023-01-22  发布在  其他
关注(0)|答案(1)|浏览(99)

我想在Flutter应用中放一个这样的抽屉:just like https://m3.material.io/develop/flutter
我用的是NavigationRail,听说可以添加一个菜单按钮来打开一个导航抽屉,有没有人知道如何添加菜单按钮和抽屉?menu button of NavigationRail
谢谢。

58wvjzkj

58wvjzkj1#

据我所知,在没有常规脚手架控制的情况下使用常规脚手架抽屉有点困难。
我想出了一个解决你的问题,如果我理解正确的话。看起来很像规格网站,需要一点造型。
NavigationRail文档为例,添加了一个Visibility小部件。现在点击目的地,你可以显示和隐藏它们的子小部件(抽屉)。但是没有抽屉动画。

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
      home: const NavRailExample(),
    );
  }
}

class NavRailExample extends StatefulWidget {
  const NavRailExample({super.key});

  @override
  State<NavRailExample> createState() => _NavRailExampleState();
}

class _NavRailExampleState extends State<NavRailExample> {
  int _selectedIndex = 0;
  NavigationRailLabelType labelType = NavigationRailLabelType.all;
  bool showLeading = false;
  bool showTrailing = false;
  double groupAligment = -1.0;
  bool _isClosed = false;

  Widget _getWidget(int index) {
    switch (index) {
      case 1:
        return GestureDetector(
          child: const Text('Tap!'),
          onTap: () => setState(() {
            _isClosed = true;
          }),
        );
      case 2:
        return const Text('empty');
      default:
        return ListView(
          children: const [
            ExpansionTile(
              title: Text('whatev'),
              children: [Text('1'), Text('2')],
            ),
            ListTile(
              title: Text('adfafdafaf'),
            )
          ],
        );
    }
  }

  Widget _getPage(int index) {
    switch (index) {
      case 1:
        return const Center(child: Text('sheeesh'));
      case 2:
        return const Center(child: Text('empty'));
      default:
        return const Center(child: Text('yolo'),);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Row(
          children: <Widget>[
            NavigationRail(
              selectedIndex: _selectedIndex,
              groupAlignment: groupAligment,
              onDestinationSelected: (int index) {
                setState(() {
                  _isClosed = (_selectedIndex == index || _isClosed)
                      ? !_isClosed
                      : _isClosed;
                  _selectedIndex = index;
                });
              },
              labelType: labelType,
              leading: showLeading
                  ? FloatingActionButton(
                      elevation: 0,
                      onPressed: () {
                        // Add your onPressed code here!
                      },
                      child: const Icon(Icons.add),
                    )
                  : const SizedBox(),
              trailing: showTrailing
                  ? IconButton(
                      onPressed: () {
                        // Add your onPressed code here!
                      },
                      icon: const Icon(Icons.more_horiz_rounded),
                    )
                  : const SizedBox(),
              destinations: const <NavigationRailDestination>[
                NavigationRailDestination(
                  icon: Icon(Icons.favorite_border),
                  selectedIcon: Icon(Icons.favorite),
                  label: Text('First'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.bookmark_border),
                  selectedIcon: Icon(Icons.book),
                  label: Text('Second'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.star_border),
                  selectedIcon: Icon(Icons.star),
                  label: Text('Third'),
                ),
              ],
            ),
            Visibility(
              maintainState: false,
              visible: !_isClosed,
              child: Row(
                children: [
                  const VerticalDivider(thickness: 1, width: 1),
                  SizedBox(
                    height: double.infinity,
                    width: 200,
                    child: _getWidget(_selectedIndex),
                  )
                ],
              ),
            ),
            const VerticalDivider(thickness: 1, width: 1),
            // This is the main content.
            Expanded(
              child: _getPage(_selectedIndex),
            ),
          ],
        ),
      ),
    );
  }
}

如果这解决了你的问题,请接受并支持我的回答。

相关问题