我正在开发Flutter应用程序,希望实现一个在多个屏幕中持久存在的底部导航栏。但是,我希望自定义导航栏中的图标,并确保它与我的应用程序的其他设计配合良好。我不确定从哪里开始或使用什么包。我所说的“跨多个屏幕的持久性”是指我希望底部导航栏在应用的所有屏幕上都可见,而不仅仅是主屏幕。我知道这可以通过BottomNavigationBar小部件等包来实现,但我希望确保实现工作顺利,不会导致任何性能问题。
jum4pzuy1#
这是一个简单实用的底部导航栏示例:
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'My App', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _currentIndex = 0; final List<Widget> _screens = [ HomeScreen(), ProfileScreen(), SettingsScreen(), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('My App'), ), body: _screens[_currentIndex], bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (index) { setState(() { _currentIndex = index; }); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ), BottomNavigationBarItem( icon: Icon(Icons.person), label: 'Profile', ), BottomNavigationBarItem( icon: Icon(Icons.settings), label: 'Settings', ), ], ), ); } } class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text('Home Screen'), ); } } class ProfileScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text('Profile Screen'), ); } } class SettingsScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text('Settings Screen'), ); } }
但您可以使用pub.dev上提供的几个软件包,这些软件包为Flutter应用程序提供可定制的底部导航栏。例如ff_navigation_bar或curved_navigation_bar
a64a0gku2#
在MaterialApp中使用builder,分配一个显示底部导航栏和动态小部件的小部件(无论用户走什么路线)。此外,在flutter check this中,有大量的选项可以开始使用底部导航栏构建器示例:
MaterialApp
builder
return MaterialApp( ... ... builder: (context, child) => AppTemplate(child), ... );
AppTemplate
class AppTemplate extends StatelessWidget { final Widget? child; const AppTemplate(this.child, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: child, bottomNavigationBar: BottomNavigationBar( items: [], ), ); } }
2条答案
按热度按时间jum4pzuy1#
这是一个简单实用的底部导航栏示例:
但您可以使用pub.dev上提供的几个软件包,这些软件包为Flutter应用程序提供可定制的底部导航栏。例如ff_navigation_bar或curved_navigation_bar
a64a0gku2#
在
MaterialApp
中使用builder
,分配一个显示底部导航栏和动态小部件的小部件(无论用户走什么路线)。此外,在flutter check this中,有大量的选项可以开始使用底部导航栏
构建器示例:
MaterialApp
配置AppTemplate