在颤振中使用 setState() 的替代方法是什么？
我正在我的 Flutter 项目 中实现 Curved_Navigation_Bar，并且我没有使用任何类（即有状态/无状态）。我想更改曲线导航栏中图标的状态，这意味着我希望导航栏上的动画效果。因为这些图标的相应页面正在导航但不是那些项目。无论我点击哪个图标，它仍然只显示第一个图标。 图标的动画/插值没有发生。
由于我没有使用任何有状态/无状态类，所以我没有使用 Scaffold。在 Scaffold 中，我们可以使用 setState(() { }) 更改当前对象的状态。
那么如何更改导航栏的状态？
这是我的代码如下：
navigation_bar.dart
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:thehelpdesk/components/home/history.dart';
import 'package:thehelpdesk/components/home/home.dart';
import 'package:thehelpdesk/components/home/menu.dart';
import 'package:thehelpdesk/components/home/notification.dart';
import 'package:thehelpdesk/components/home/person.dart';
int currentIndex = 0 ;
Widget navBarSection(Color color, Color btnColor, BuildContext context) {
return CurvedNavigationBar(
index: 0,
items:
[
Icon(Icons.home, color: Colors.white),
Icon(Icons.notifications, color: Colors.white),
Icon(Icons.menu, color: Colors.white),
Icon(Icons.history, color: Colors.white),
Icon(Icons.person, color: Colors.white),
],
color: color,
buttonBackgroundColor: btnColor,
animationCurve: Curves.easeInCubic,
animationDuration: Duration(milliseconds: 600),
onTap: (index) {
if(currentIndex == 0){
Navigator.of(context).push(MaterialPageRoute(builder: (context) => HomePage()));
currentIndex = index ;
}
if(currentIndex == 1){
Navigator.of(context).push(MaterialPageRoute(builder: (context) => NotificationPage()));
currentIndex = index ;
}
if(currentIndex == 2){
Navigator.of(context).push(MaterialPageRoute(builder: (context) => MenuPage()));
currentIndex = index ;
}
if(currentIndex == 3){
Navigator.of(context).push(MaterialPageRoute(builder: (context) => HistoryPage()));
currentIndex = index ;
}
if(currentIndex == 4){
Navigator.of(context).push(MaterialPageRoute(builder: (context) => PersonPage()));
currentIndex = index ;
}
}
);
我想通过点击图标导航的页面之一：
home.dart
import 'package:flutter/material.dart';
import 'package:thehelpdesk/widgets/appbar.dart';
import 'package:thehelpdesk/widgets/navigation_bar.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: aapBarSection('Home', Colors.blueAccent[700], context),
bottomNavigationBar: navBarSection(
Colors.blueAccent[700],
Colors.blueAccent[700],
context
),
);
}
}
点击第二个图标的另一个页面：
notification.dart
import 'package:flutter/material.dart';
import 'package:thehelpdesk/widgets/appbar.dart';
import 'package:thehelpdesk/widgets/navigation_bar.dart';
class NotificationPage extends StatefulWidget {
@override
_NotificationPageState createState() => _NotificationPageState();
}
class _NotificationPageState extends State<NotificationPage> {
final message = [
'Hi Xyz,your invoice for It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
'Hi Xyz, Agility Rehab Care wishing you a very happy birthday! for It has survived not only five centuries, but also the leap remaining essentially unchanged.',
'Hi Xyz, From our Agility Rehab Care you are being reminded that you have an appointment with us on this Friday.',
'Hi Xyz, This is a reminder for you from Agility Rehab Care It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
];
final images = [
'assets/images/Invoice.png',
'assets/images/cake.png',
'assets/images/calender.png',
'assets/images/Reminder.png'
];
String date = '22/02/2021';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: aapBarSection('Notification',Colors.blueAccent[700],context),
bottomNavigationBar: navBarSection(
Colors.blueAccent[700],
Colors.blueAccent[700],
context
),
body: ListView.builder(
itemCount: message.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
child: SizedBox(
height: 200,
child: Card(
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Column(
children: [
Flexible(
flex: 7,
child: Container(
child: Row(
children: [
Expanded(
flex: 2,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
images[index]))),
),
),
Expanded(
flex: 8,
child: Container(
child: Text(message[index]),
),
),
],
),
),
),
Flexible(
flex: 3,
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [Text(date)],
),
),
),
),
],
),
),
)),
),
);
})
);
}
}
1 个答案:
答案 0 :(得分：0)
简短的回答是，只需在您的 currentIndex 中添加 navBarSection 作为参数之一。
navigation_bar.dart
Widget navBarSection(
int currentIndex,
Color color,
Color btnColor,
BuildContext context,
) {
return CurvedNavigationBar(
index: currentIndex,
items: [
Icon(Icons.home, color: Colors.white),
Icon(Icons.notifications, color: Colors.white),
Icon(Icons.menu, color: Colors.white),
Icon(Icons.history, color: Colors.white),
Icon(Icons.person, color: Colors.white),
],
color: color,
buttonBackgroundColor: btnColor,
animationCurve: Curves.easeInCubic,
animationDuration: Duration(milliseconds: 600),
onTap: (index) {
if (currentIndex == 0) {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => HomePage()));
currentIndex = index;
}
if (currentIndex == 1) {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => NotificationPage()));
currentIndex = index;
}
if (currentIndex == 2) {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => MenuPage()));
currentIndex = index;
}
if (currentIndex == 3) {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => HistoryPage()));
currentIndex = index;
}
if (currentIndex == 4) {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => PersonPage()));
currentIndex = index;
}
});
}
在 home.dart 内，只需传递页面的 currentIndex。
home.dart
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: aapBarSection('Home', Colors.blueAccent[700], context),
bottomNavigationBar: navBarSection(
0,
Colors.blueAccent[700],
Colors.blueAccent[700],
context,
),
);
}
}
这应该可以解决您的问题，但正如您所见，这不是实现 bottomnavigationbar 和小部件的最佳方式，原因是：
- 您将丢失软件包提供的动画。
- 它不符合底部导航行为，因为它将导航到新页面而不是替换它。
为了解决这个问题，创建一个新的有状态小部件，对于这个例子，我称之为main_page.dart。
main_page.dart
class MainPage extends StatefulWidget {
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
int _currentIndex = 0;
List<Widget> _pages = [
HomePage(),
NotificationPage(),
MenuPage(),
HistoryPage(),
PersonPage(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: _pages.elementAt(_currentIndex),
bottomNavigationBar: CurvedNavigationBar(
backgroundColor: Colors.blueAccent,
items: [
Icon(Icons.home, color: Colors.white),
Icon(Icons.notifications, color: Colors.white),
Icon(Icons.menu, color: Colors.white),
Icon(Icons.history, color: Colors.white),
Icon(Icons.person, color: Colors.white),
],
color: Colors.blueAccent[700],
buttonBackgroundColor: Colors.blueAccent[700],
animationCurve: Curves.easeInCubic,
animationDuration: Duration(milliseconds: 600),
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}
在您的 main_page.dart 中调用了 main.dart。
main.dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MainPage(),
);
}
}
最后，从主页、历史记录、菜单、通知和个人页面中删除任何 bottomNavigationBar。
结果是
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？