gpt4 book ai didi

dart - Flutter 从 bottomappbar 更改页面

转载 作者:IT王子 更新时间:2023-10-29 07:21:00 24 4
gpt4 key购买 nike

我是 Flutter 的新手,我想拥有 2 个导航栏。我的 TabBar 也能正常工作,但我的 BottomAppBar 无法进行页面更改。是的,我想保留我的 FAB BottomAppBar 的设计,这就是我不想使用 BottomNavigationBar 的原因。

我已阅读以下答案:但是我的 body 已经分配了,所以我不能创建 PageView。

我的代码:

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,
),
home: DefaultTabController(
length: 6,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
isScrollable: true,
tabs: [
Tab(text: "NewPay1.1"),
Tab(text: "NewMall 1.0"),
Tab(text: "海报"),
Tab(text: "企业版"),
Tab(text: "个版"),
Tab(text: "poa")
],
),
title: Text('tabBar'),
),
body: TabBarView(
children: [
TaskListPage(),
TestPage(),
],
),
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(),
child: Row(
children: <Widget>[
IconButton(onPressed: () {
print("home clicked");
TaskListPage();
},
icon: Icon(Icons.home),),
SizedBox(),
IconButton(onPressed: () {
print("third clicked");
TestPage();
},
icon: Icon(Icons.more))
],
mainAxisAlignment: MainAxisAlignment.spaceAround,
),
),
floatingActionButton: FloatingActionButton(
onPressed: (){
return TestPage().createState();
},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
),
),
);
}
}

最佳答案

输出:

enter image description here

这就是您所需要的。

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
TabController _tabController; // use this instead of DefaultTabController

@override
void initState() {
super.initState();
_tabController = TabController(length: 6, vsync: this); // initialise it here
}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: _tabController,
isScrollable: true,
tabs: [
Tab(text: "NewPay1.1"),
Tab(text: "NewMall 1.0"),
Tab(text: "海报"),
Tab(text: "企业版"),
Tab(text: "个版"),
Tab(text: "poa"),
],
),
title: Text('tabBar'),
),
body: TabBarView(
controller: _tabController,
children: [ // these are your pages
Page1(),
Page2(),
Page3(),
Page4(),
Page5(),
Page6(),
],
),
bottomNavigationBar: BottomAppBar(
color: Colors.white,
shape: CircularNotchedRectangle(),
child: Row(
children: <Widget>[
IconButton(
onPressed: () => _tabController.animateTo(0), // go to page1
icon: Icon(Icons.home),
),
SizedBox(),
IconButton(onPressed: () => _tabController.animateTo(1), // go to page 2
icon: Icon(Icons.more))
],
mainAxisAlignment: MainAxisAlignment.spaceAround,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
),
);
}
}

关于dart - Flutter 从 bottomappbar 更改页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55647580/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com