我正在尝试创建一个使用Tab管理视图的应用程序。
导航栏和标签栏显示在应用程序中,要显示的内容的内容由列表管理。
这是管理Tab内容的类。
class TabItem {
TabItem({
Widget view,
Widget icon,
Widget activeIcon,
String title,
TickerProvider vsync,
}) : _view = view,
_title = title,
item = BottomNavigationBarItem(
icon: icon,
// activeIcon: activeIcon,
title: Text(title),
),
controller = AnimationController(
duration: kThemeAnimationDuration,
vsync: vsync,
) {
_animation = CurvedAnimation(
parent: controller,
curve: const Interval(0.5, 1.0, curve: Curves.fastOutSlowIn),
);
}
final Widget _view;
final String _title;
final BottomNavigationBarItem item;
final AnimationController controller;
CurvedAnimation _animation;
FadeTransition transition(
BottomNavigationBarType type, BuildContext context) {
~~~~~~~~~~~~
//transition animation setting method
~~~~~~~~~~~~
}
}
这是main.dart
根据用户的操作,将显示列表中的内容。
void main() {
SystemChrome
.setPreferredOrientations([DeviceOrientation.portraitUp]).then((_) {
runApp(MyApp());
});
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: RootTabView(),
);
}
}
class RootTabView extends StatefulWidget {
@override
_RootTabViewState createState() => _RootTabViewState();
}
class _RootTabViewState extends State<RootTabView>
with TickerProviderStateMixin {
int _currentIndex = 0;
BottomNavigationBarType _type = BottomNavigationBarType.fixed;
List<TabItem> _tabItems;
@override
void initState() {
super.initState();
// tabitems of view
_tabItems = <TabItem>[
TabItem(
view: hoge0View(),
icon: const Icon(Icons.accessibility),
title: 'hoge0',
vsync: this,
),
TabItem(
view: hoge1View(),
icon: const Icon(Icons.accessibility),
title: 'hoge1',
vsync: this,
),
TabItem(
view: hoge2View(),
icon: const Icon(Icons.accessibility),
title: 'hoge2',
vsync: this,
),
TabItem(
view: hoge3View(),
icon: const Icon(Icons.accessibility),
title: 'hoge3',
vsync: this,
)
];
for (TabItem tabItem in _tabItems) {
tabItem.controller.addListener(_rebuild);
}
_tabItems[_currentIndex].controller.value = 1.0;
}
@override
void dispose() {
for (TabItem tabItem in _tabItems) {
tabItem.controller.dispose();
}
super.dispose();
}
void _rebuild() {
if (this.mounted) {
setState(() {
// Rebuild in order to animate views.
});
}
}
Widget _buildTransitionsStack() {
final List<FadeTransition> transitions = <FadeTransition>[];
for (TabItem tabItem in _tabItems) {
transitions.add(tabItem.transition(_type, context));
}
// We want to have the newly animating (fading in) views on top.
transitions.sort((FadeTransition a, FadeTransition b) {
final Animation<double> aAnimation = a.opacity;
final Animation<double> bAnimation = b.opacity;
final double aValue = aAnimation.value;
final double bValue = bAnimation.value;
return aValue.compareTo(bValue);
});
return Stack(children: transitions);
}
@override
Widget build(BuildContext context) {
final BottomNavigationBar botNavBar = BottomNavigationBar(
items: _tabItems.map((TabItem tabItem) => tabItem.item).toList(),
currentIndex: _currentIndex,
type: _type,
onTap: (int index) {
setState(() {
var currentView = _tabItems[_currentIndex];
currentView.controller.reverse();
_currentIndex = index;
currentView = _tabItems[_currentIndex];
currentView.controller.forward();
});
},
);
return Scaffold(
appBar: AppBar(
title: Text(_tabItems[_currentIndex]._title),
actions: actions,
),
body: Center(child: _buildTransitionsStack()),
bottomNavigationBar: botNavBar,
);
}
}
好吧,这里我重写了一部分build方法。 我在索引为1的AppBar上放置了一个按钮,并想要点击并调用所显示视图实例的方法。
var actions = <Widget>[];
if (_currentIndex == 1) {
var editButton = FlatButton(
child: Text('Edit'),
onPressed: () {
// I want to call hoge1View method...
});
actions.add(editButton);
}
return Scaffold(
appBar: AppBar(
title: Text(_tabItems[_currentIndex]._title),
actions: actions,
),
body: Center(child: _buildTransitionsStack()),
bottomNavigationBar: botNavBar,
);
Hoge1View的实现如下。 我想在点击editButton时调用showEditButtonDialog()。
class Hoge1View extends StatefulWidget {
@override
_Hoge1ViewState createState() => _Hoge1ViewState();
}
class _Hoge1ViewState extends State<DiaryView> {
Future showEditButtonDialog() async {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('test'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[Text('test message')],
),
),
actions: <Widget>[
FlatButton(
child: Text('action1'),
onPressed: () {
print('pressed');
},
)
],
);
});
}
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Container(),
Container(),
Container(),
]
);
}
}
我不知道如何获取onPress上当前显示的Hoge1View实例。