如何解决Flutter:奇怪的动画,结合了bottomSheet和bottomNavigationBar并调用setState
我在有状态小部件中具有一个带有bottomSheet和bottomNavigationBar的脚手架。 我计划在bottomSheet中添加按钮,调用setState并触发本地小部件树的重建。
问题是,调用setState或重建窗口小部件时发生奇怪的动画。底部工作表似乎来自底部导航栏顶部的底部。
在重建或调用setState时是否有一种方法可以解决此问题,从而使该动画不会发生?
请参见下面的代码。要观察该行为,请运行代码,然后单击绿色的bottomSheet:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,home: MyStatefulWidget(),);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30,fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',style: optionStyle,),Text(
'Index 1: Business',Text(
'Index 2: School',];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),body: Center(
child: _widgetOptions.elementAt(_selectedIndex),bottomSheet: MaterialButton(onPressed: () {
setState(() {});
},child: Container(height: 50,color: Colors.green)),bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),title: Text('Home'),BottomNavigationBarItem(
icon: Icon(Icons.business),title: Text('Business'),BottomNavigationBarItem(
icon: Icon(Icons.school),title: Text('School'),],currentIndex: _selectedIndex,selectedItemColor: Colors.amber[800],onTap: _onItemTapped,);
}
}
当复制/粘贴并运行上面的代码时,您应该能够重现我正在谈论的行为。
我不确定我在这里做错了什么,但这对我来说似乎很可疑。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。