嗨,我正在尝试实现类似于Instagram的导航系统。我想知道如何将不全屏的窗口小部件推到Navigator,同时也将导航器推窗口小部件作为视图的子级(以使底部选项卡固定在父窗口小部件中)。看看这个和PageRouteBuilder,但确切地知道我该怎么做: https://docs.flutter.io/flutter/widgets/Navigator-class.html 有人做到了吗?
self.coroutine.send( self.pipe.recv() )
AttributeError: 'function' object has no attribute 'send'
我已经通过一堆小部件实现了我想要的,但是不能与hero :(。
一起使用。答案 0 :(得分:0)
您可以改用PageView
小部件
一个有效的例子:
import 'package:flutter/material.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,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int bottomSelectedIndex = 0;
List<BottomNavigationBarItem> buildBottomNavBarItems() {
return [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Red')
),
BottomNavigationBarItem(
icon: new Icon(Icons.search),
title: new Text('Blue'),
),
BottomNavigationBarItem(
icon: Icon(Icons.info_outline),
title: Text('Yellow')
)
];
}
PageController pageController = PageController(
initialPage: 0,
keepPage: true,
);
Widget buildPageView() {
return PageView(
controller: pageController,
onPageChanged: (index) {
pageChanged(index);
},
children: <Widget>[
Red(),
Blue(),
Yellow(),
],
);
}
@override
void initState() {
super.initState();
}
void pageChanged(int index) {
setState(() {
bottomSelectedIndex = index;
});
}
void bottomTapped(int index) {
setState(() {
bottomSelectedIndex = index;
pageController.animateToPage(index, duration: Duration(milliseconds: 500), curve: Curves.ease);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: buildPageView(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: bottomSelectedIndex,
onTap: (index) {
bottomTapped(index);
},
items: buildBottomNavBarItems(),
),
);
}
}
class Red extends StatefulWidget {
@override
_RedState createState() => _RedState();
}
class _RedState extends State<Red> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
);
}
}
class Blue extends StatefulWidget {
@override
_BlueState createState() => _BlueState();
}
class _BlueState extends State<Blue> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blueAccent,
);
}
}
class Yellow extends StatefulWidget {
@override
_YellowState createState() => _YellowState();
}
class _YellowState extends State<Yellow> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellowAccent,
);
}}
来源:https://medium.com/@KarthikPonnam/flutter-pageview-withbottomnavigationbar-fb4c87580f6a