flutter - 如何为外部类创建页面 View

Question

我正在尝试为外部类创建页面 View ，以在按bottomNavigationBar图标项的同时在页面之间滑动，这与以下问题相关:

How to replace a small widget for a child when onPressed on a BottomAppBar Icon Item？

因此，我尝试遵循以下文章，以在单击与bottomNavigationBar相关的图标时将其应用于分页...

https://medium.com/@KarthikPonnam/flutter-pageview-withbottomnavigationbar-fb4c87580f6a

当我尝试将此部分添加到我的代码中时:

Widget buildPageView() {
    return PageView(
      controller: pageController,
      onPageChanged: (index) {
        pageChanged(index);
      },
      children: <Widget>[
        HomeGrid(),
        PropertiesGrid(),
        // Yellow(),
      ],
    );
  }

我发现 HomeGrid()和 PropertiesGrid()的语法错误如下:

1 positional argument(s) expected, but 0 found.
Try adding the missing arguments.dartnot_enough_positional_arguments)

我需要一些帮助我解决此问题的方法，以执行本文的方式并将其应用于我的代码...

如何基于 Grid小部件在屏幕的一小部分之间滑动...

Answer 1

您收到的错误是由于您如何创建窗口小部件而导致的，因为它们需要将参数传递给它们，以使命名的参数和带有参数的可选使用{}与参数一起成为位置可选的[[]，至于更改屏幕的一部分，您可以像本文中一样使用PageView小部件，但是现在您应该像下面的示例一样添加Stack，我从文章中获取了一些代码，并对其进行了一些微调，我还为您提供了很多对代码的注释，使您更容易理解:

class CustomPages extends StatefulWidget {
  @override
  _CustomPagesState createState() => _CustomPagesState();
}

class _CustomPagesState extends State<CustomPages> {
  // this is used to control the page being displayed in PageView
  PageController pageController = PageController(
    initialPage: 0,
    keepPage: true,
  );

  // this is used to change the displayed page
  void pageChanged(int index) {
    setState(() {
      bottomSelectedIndex = index;
    });
  }

  // this build a PageView widget
  Widget buildPageView() {
    return PageView(
      controller: pageController,
      onPageChanged: (index) {
        pageChanged(index);
      },
      children: <Widget>[
        FlutterLogo(),
        FlutterLogo(colors: Colors.red),
        FlutterLogo(colors: Colors.yellow),
      ],
    );
  }

  // this is the index of bottomNavigationBar
  int bottomSelectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topCenter,
              child: Text('This won\'t change', style: TextStyle(fontSize: 30)),
            ),
            buildPageView(),
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: bottomSelectedIndex,
          items: buildBottomNavBarItems(),
          onTap: (index) => bottomTapped(index),
        ),
      ),
    );
  }

  // this build item for bottomNavigationBar
  List<BottomNavigationBarItem> buildBottomNavBarItems() {
    return [
      BottomNavigationBarItem(
          icon: new Icon(Icons.home), title: new Text('1')),
      BottomNavigationBarItem(
        icon: new Icon(Icons.search),
        title: new Text('2'),
      ),
      BottomNavigationBarItem(
          icon: Icon(Icons.info_outline), title: Text('3'))
    ];
  }

  // this get called when bottomNavigationBar item is called and change the 
  // index of item and page in the PageView
  void bottomTapped(int index) {
    setState(() {
      bottomSelectedIndex = index;
      pageController.animateToPage(index, duration: Duration(milliseconds: 500), curve: Curves.ease);
    });
  }


}