简体   繁体   English

Flutter 快速操作更改选定的底部导航栏项目

[英]Flutter Quick Actions change selected Bottom Navigation Bar item

I'm trying to implement home screen quick actions / app shortcuts in my Flutter app.我正在尝试在我的 Flutter 应用程序中实现主屏幕快速操作/应用程序快捷方式。 What I'm trying to achieve is when the user launches my app via a quick action, the app changes the selected tab inside the bottom navigation bar.我想要实现的是,当用户通过快速操作启动我的应用程序时,应用程序会更改底部导航栏中的选定选项卡。 Any help is appreciated.任何帮助表示赞赏。

main.dart: main.dart:

runApp(
    MaterialApp(
      theme: Themes.appLightTheme,
      darkTheme: Themes.appDarkTheme,
      home: QuickActionsController(
        child: HomeFrame(currentIndex: 0),
      ),

My QuickActionsController class:我的 QuickActionsController class:

import 'package:binfinder/screens/HomeFrame.dart';
import 'package:flutter/material.dart';
import 'package:quick_actions/quick_actions.dart';

class QuickActionsController extends StatefulWidget {
  final HomeFrame child;

  QuickActionsController({Key key, this.child}) : super(key: key);

  @override
  _QuickActionsControllerState createState() => _QuickActionsControllerState();
}

class _QuickActionsControllerState extends State<QuickActionsController> {
  final QuickActions quickActions = QuickActions();
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _handleQuickActions();
    _setupQuickActions();
  }

  void _setupQuickActions() {
    quickActions.setShortcutItems(<ShortcutItem>[
      ShortcutItem(
        type: 'action_map',
        localizedTitle: 'Map',
      ),
    ]);
  }

  void _handleQuickActions() {
    quickActions.initialize((shortcutType) {
      if (shortcutType == 'action_map') {
        setState(() {
          _currentIndex = 1;
        });
      } else {
        setState(() {
          _currentIndex = 0;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    widget.child.currentIndex = _currentIndex;
    return widget.child;
  }
}

In the demo below, direct click app will enter First Page and In Quick Action choose Main view will enter Second Page在下面的演示中,直接点击应用程序将进入第一页,在快速操作中选择主视图将进入第二页

_handleQuickActions need to use _handleQuickActions 需要使用

Navigator.pushReplacement(
        context,
        MaterialPageRoute(
            builder: (context) => BottomNavigationBarController(
                  initialIndex: 1,
                )));

and use initial index to control page index并使用初始索引来控制页面索引

class BottomNavigationBarController extends StatefulWidget {
  final int initialIndex;

  BottomNavigationBarController({
    this.initialIndex,
    Key key,
  }) : super(key: key);

  @override
  _BottomNavigationBarControllerState createState() =>
      _BottomNavigationBarControllerState();
}

full code完整代码

import 'package:flutter/material.dart';
import 'package:quick_actions/quick_actions.dart';
import 'dart:io';

class QuickActionsManager extends StatefulWidget {
  final Widget child;
  QuickActionsManager({Key key, this.child}) : super(key: key);

  _QuickActionsManagerState createState() => _QuickActionsManagerState();
}

class _QuickActionsManagerState extends State<QuickActionsManager> {
  final QuickActions quickActions = QuickActions();

  @override
  void initState() {
    super.initState();
    _setupQuickActions();
    _handleQuickActions();
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }

  void _setupQuickActions() {
    quickActions.setShortcutItems(<ShortcutItem>[
      ShortcutItem(
          type: 'action_main',
          localizedTitle: 'Main view',
          icon: Platform.isAndroid ? 'quick_box' : 'QuickBox'),
      ShortcutItem(
          type: 'action_help',
          localizedTitle: 'Help',
          icon: Platform.isAndroid ? 'quick_heart' : 'QuickHeart')
    ]);
  }

  void _handleQuickActions() {
    quickActions.initialize((shortcutType) {
      if (shortcutType == 'action_main') {
        Navigator.pushReplacement(
            context,
            MaterialPageRoute(
                builder: (context) => BottomNavigationBarController(
                      initialIndex: 1,
                    )));
      } else if (shortcutType == 'action_help') {
        print('Show the help dialog!');
      }
    });
  }
}

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'QuickActions Demo',
        home: QuickActionsManager(child: BottomNavigationBarController(initialIndex: 0,)));
  }
}

class Home extends StatelessWidget {
  const Home({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(child: Text('Home')));
  }
}

class Login extends StatelessWidget {
  const Login({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(child: Text('Login')));
  }
}

class BottomNavigationBarController extends StatefulWidget {
  final int initialIndex;

  BottomNavigationBarController({
    this.initialIndex,
    Key key,
  }) : super(key: key);

  @override
  _BottomNavigationBarControllerState createState() =>
      _BottomNavigationBarControllerState();
}

class _BottomNavigationBarControllerState
    extends State<BottomNavigationBarController> {
  final List<Widget> pages = [
    FirstPage(
      key: PageStorageKey('Page1'),
    ),
    SecondPage(
      key: PageStorageKey('Page2'),
    ),
  ];

  final PageStorageBucket bucket = PageStorageBucket();

  int _selectedIndex = 0;

  Widget _bottomNavigationBar(int selectedIndex) => BottomNavigationBar(
        onTap: (int index) => setState(() => _selectedIndex = index),
        currentIndex: selectedIndex,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.add), title: Text('First Page')),
          BottomNavigationBarItem(
              icon: Icon(Icons.list), title: Text('Second Page')),
        ],
      );

  @override
  void initState() {
    _selectedIndex = widget.initialIndex;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: _bottomNavigationBar(_selectedIndex),
      body: PageStorage(
        child: pages[_selectedIndex],
        bucket: bucket,
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("First Screen"),
      ),
      body: ListView.builder(itemBuilder: (context, index) {
        return ListTile(
          title: Text('Lorem Ipsum'),
          subtitle: Text('$index'),
        );
      }),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: ListView.builder(itemBuilder: (context, index) {
        return ListTile(
          title: Text('Lorem Ipsum'),
          subtitle: Text('$index'),
        );
      }),
    );
  }
}

demo, emulator is a little slow when enter Second Page demo,模拟器进入第二页有点慢

在此处输入图像描述

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 按 fab 更改底部导航栏选定的项目 - Change Bottom Navigation Bar selected Item by fab 固定类型时,根据Flutter中选择的项目更改整个底部导航栏的背景颜色 - Change the background color of the entire bottom navigation bar depending on item selected in Flutter when type is fixed Flutter 如何在底部导航栏中单击所选项目 - Flutter How to clickable the selected item in bottom navigation bar 底部导航栏项目下划线所选图标 - Bottom navigation bar item underline selected icon Flutter中的自定义底部导航栏项目装饰 - Custom Bottom Navigation Bar Item Decoration in Flutter 颤动底部导航栏使项目没有路线 - Flutter bottom navigation bar make item with no route Flutter - 单击底部导航栏项目打开模态底部工作表 - Flutter - Open Modal Bottom Sheet on Bottom navigation bar item click Flutter 底部导航栏没有改变颜色选择如果放一个开关 - Flutter bottom navigation bar didn't change color on selected if a put a switch 如何在flutter中不在导航项列表中的页面中显示底部导航栏? - How to show bottom navigation bar in page that is not in the navigation item list in flutter? Flutter 轻松本地化不会更改底部导航栏项目的标题 - Flutter Easy Localization Doesn't Change Bottom Navigation Bar Item's Titles
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM