Flutter：从另一个 dart 文件路由到页面浏览小部件的特定页面

Question

我目前正在开发一个网络应用程序，想从一个页面路由到综合浏览量小部件的特定页面。我知道，我可以使用 pagecontroller 的 jumpTo 方法跳转到同一 class 中的页面。但是我无法从另一个飞镖文件访问页面控制器。目前我路由到页面视图，可以滚动到所有页面（没问题）。这些页面包含不同的啤酒风格。现在我在项目中有另一个 dart 文件，它在一页上列出了我冰箱里的所有啤酒。从那里我想跳转到综合浏览量的特定页面，或者换句话说跳转到特定的啤酒。例如，我冰箱里有 Porter，然后我想在它旁边有一个按钮，跳转到页面视图小部件中的端口页面。

我该怎么做？

这是目前的综合浏览量：

import 'package:flutter/material.dart';

class AboutView extends StatefulWidget {
  @override
  State<AboutView> createState() => _AboutViewState();
}

class _AboutViewState extends State<AboutView> {
  PageController controller = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      child: PageView(
        controller: controller,
        scrollDirection: Axis.vertical,
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Text('Porter'),
                SizedBox(
                  width: 60,
                ),
                CircleAvatar(
                  backgroundColor: Colors.transparent,
                  backgroundImage:
                      AssetImage("assets/ShirtLogoBierNEWFrontMedium.png"),
                ),
              ],
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Center(
              child: Text('IPA'),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Center(
              child: Text('Pale Ale'),
            ),
          ),
        ],
      ),
    ));
  }
}

Answer 1

当您想重定向到特定页面时，您可以使用您选择的索引进行导航，PageController(initialPage: 0) 将设置您的特定页面，如下所示是您的 class,

import 'package:flutter/material.dart';

class AboutView extends StatefulWidget {
  int selectedIndex;
    
  AboutView(this.selectedIndex);
    
  @override
  State<AboutView> createState() => _AboutViewState();
}

class _AboutViewState extends State<AboutView> {
  PageController? controller;

  @override
  void initState() {
  // TODO: implement initState
  super.initState();
  controller = PageController(initialPage: widget.selectedIndex);
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      child: PageView(
        controller: controller,
        scrollDirection: Axis.vertical,
        children: [
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Text('Porter'),
                SizedBox(
                  width: 60,
                ),
                CircleAvatar(
                  backgroundColor: Colors.transparent,
                  backgroundImage:
                      AssetImage("assets/ShirtLogoBierNEWFrontMedium.png"),
                ),
              ],
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Center(
              child: Text('IPA'),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.white,
            child: Center(
              child: Text('Pale Ale'),
            ),
          ),
        ],
      ),
    ));
  }
}

当您想从另一个 dart 文件导航时，

Navigator.push(context, new MaterialPageRoute(builder: (context) => AboutView(2)));

Flutter：从另一个 dart 文件路由到页面浏览小部件的特定页面

Flutter: Route to a specific page of pageview widget from another dart file

dart

flutter

flutter-web