我已经使用flutter实现了以下底部导航栏
import 'package:flutter/material.dart';
class Test extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
bottomNavigationBar: new BottomNavigationBar(
items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.add),
title: new Text("trends")
),
new BottomNavigationBarItem(
icon: new Icon(Icons.location_on),
title: new Text("feed")
),
new BottomNavigationBarItem(
icon: new Icon(Icons.people),
title: new Text("community")
)
]
)
);}}
如何制作onTap
每个BottomNavigationBar
项目会打开新的.dart
课程?
我已尝试使用TabBarView
选项卡,但不知道如何处理底部导航栏。
答案 0 :(得分:3)
你可以这样做
import 'package:flutter/material.dart';
class Test extends StatefulWidget {
@override
TestState createState() {
return new TestState();
}
}
class TestState extends State<Test> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return new Scaffold(
bottomNavigationBar: new BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (newIndex) => setState((){_currentIndex = newIndex;}),
items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.add),
title: new Text("trends")
),
new BottomNavigationBarItem(
icon: new Icon(Icons.location_on),
title: new Text("feed")
),
new BottomNavigationBarItem(
icon: new Icon(Icons.people),
title: new Text("community")
),
],
),
body: new IndexedStack(
index: _currentIndex,
children: <Widget>[
new YourCustomTrendsWidget(),
new YourCustomFeedWidget(),
new YourCustomCommunityWidget(),
],
),
);
}
}