我对 Flutter 和构建我的第一个真正的应用程序还很陌生。我实现了一个路由器类并从图标按钮生成命名路由以进行导航。下一步我还想通过滑动在3个屏幕之间切换。
我的结构是：
main.dart (returns MaterialApp)
FirstScreen.dart (returns Scaffold)
SecondScreen.dart (returns Scaffold)
ThirdScreen.dart (returns Scaffold)
我尝试通过向 main.dart 添加一个 Pageview 小部件来实现滑动功能，但是当我切换到使用 IconButtons 导航并切换到另一个屏幕时，滑动功能将不再起作用。我想问题很明显，因为我不再使用 main.dart，它不会加载 PageView。但我缺乏一种整合这两个功能的干净方法。
非常高兴我能得到每一个帮助，在此先感谢！
【问题讨论】：
标签： flutter routes swipe named generated
您真的需要使用命名路线进行导航吗？
如果没有，那么您可以为您的 PageView 添加一个 PageController 并在您的 IconButtons 中使用 nextPage/previousPage 函数。这只是一个通过 PageController 导航的粗略示例。
class SamplePageView extends StatelessWidget {
@override
Widget build(BuildContext context) {
PageController pageController = PageController(initialPage: 0);
return PageView(
controller: pageController,
children: [
Container(
child: Column(
children: [
Text('First page'),
Row(
children: [
FlatButton(
color: Colors.orange,
child: Text('Next'),
onPressed: () => pageController.nextPage(
duration: Duration(milliseconds: 100),
curve: Curves.ease),
)
],
)
],
),
),
Container(
child: Column(
children: [
Text('Second page'),
Row(
children: [
FlatButton(
color: Colors.yellow,
child: Text('Previous'),
onPressed: () => pageController.previousPage(
duration: Duration(milliseconds: 100),
curve: Curves.ease),
),
FlatButton(
color: Colors.orange,
child: Text('Next'),
onPressed: () => pageController.nextPage(
duration: Duration(milliseconds: 100),
curve: Curves.ease),
)
],
)
],
),
),
Container(
child: Column(
children: [
Text('Third page'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
color: Colors.yellow,
child: Text('Previous'),
onPressed: () => pageController.previousPage(
duration: Duration(milliseconds: 100),
curve: Curves.ease),
),
],
)
],
),
),
],
);
}
}
【讨论】：
您可以只传递页面控制器。这是相同的示例，但带有您的问题。
class SamplePageView extends StatelessWidget {
@override
Widget build(BuildContext context) {
PageController pageController = PageController(initialPage: 0);
return PageView(
controller: pageController,
children: [
First(pageController: pageController),
Second(pageController: pageController),
Third(pageController: pageController),
],
);
}
}
class Third extends StatelessWidget {
const Third({
Key key,
@required this.pageController,
}) : super(key: key);
final PageController pageController;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
Text('Third page'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
color: Colors.yellow,
child: Text('Previous'),
onPressed: () => pageController.previousPage(
duration: Duration(milliseconds: 100), curve: Curves.ease),
),
],
)
],
),
);
}
}
class Second extends StatelessWidget {
const Second({
Key key,
@required this.pageController,
}) : super(key: key);
final PageController pageController;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
Text('Second page'),
Row(
children: [
FlatButton(
color: Colors.yellow,
child: Text('Previous'),
onPressed: () => pageController.previousPage(
duration: Duration(milliseconds: 100), curve: Curves.ease),
),
FlatButton(
color: Colors.orange,
child: Text('Next'),
onPressed: () => pageController.nextPage(
duration: Duration(milliseconds: 100), curve: Curves.ease),
)
],
)
],
),
);
}
}
class First extends StatelessWidget {
const First({
Key key,
@required this.pageController,
}) : super(key: key);
final PageController pageController;
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
Text('First page'),
Row(
children: [
FlatButton(
color: Colors.orange,
child: Text('Next'),
onPressed: () => pageController.nextPage(
duration: Duration(milliseconds: 100), curve: Curves.ease),
)
],
)
],
),
);
}
}
【讨论】：
我还是有点卡住了。如何在多个屏幕之间传递 PageController，以便调用它的方法？
我当前的代码：
main.dart
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'WeinCheckerApp',
home: PageViewScreen(),
);
}
}
class PageViewScreen extends StatefulWidget {
@override
_PageViewScreenState createState() => _PageViewScreenState();
}
class _PageViewScreenState extends State<PageViewScreen> {
PageController _pageController = PageController(
initialPage: 1,
);
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[800],
appBar: AppBar(
backgroundColor: Colors.red[900],
title: Center(child: Text("WeinCheckerApp")),
),
body: PageView(
controller: _pageController,
children: [
SearchScreen(),
ScanScreen(),
FavScreen(),
],
),
);
}
}
ScanScreen.dart（目前 3 个屏幕之一）：
class ScanScreen extends StatefulWidget {
@override
_ScanScreenState createState() => _ScanScreenState();
}
class _ScanScreenState extends State<ScanScreen> {
@override
Widget build(BuildContext context) {
SizeConfig().init(context);
return SafeArea(
minimum: EdgeInsets.only(
left: SizeConfig.safeBlockVertical,
right: SizeConfig.safeBlockVertical,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Expanded(
child: IconButton(
icon: Icon(Icons.search),
color: Colors.white,
onPressed: () => {},
iconSize: SizeConfig.safeBlockVertical * 5,
),
),
Ink(
decoration:
ShapeDecoration(shape: CircleBorder(), color: Colors.white),
child: IconButton(
icon: Icon(Icons.camera_alt),
color: Colors.grey[800],
onPressed: () => print("ScanButtonPressed"),
iconSize: SizeConfig.safeBlockVertical * 6,
),
),
Expanded(
child: IconButton(
icon: Icon(Icons.star),
color: Colors.white,
onPressed: () => {},
iconSize: SizeConfig.safeBlockVertical * 5,
),
),
],
),
],
),
);
}
}
图标按钮应该通向其他屏幕。
【讨论】：