Flutter bottomNavigationBar（仅更改正文部分）

Question

好的，我已经让下面的底部导航栏工作了，但是它对我来说不够干净，我希望有人知道有更好的方法。

基本上我只想更改正文部分而不是整页。

但是我希望将每个部分放在不同的类中以保持整洁（最好是新的 .dart 文件 - 因为它们都有不同的功能）

目前所有页面信息都在body标签内

 body: PageView(
      controller: _myPage,
      onPageChanged: (int) {
        print('Page Changes to index $int');
      },
      children: <Widget>[
        Center(
          child: Container(
            child: Text('Empty Body 0'),
          ),
        ),
        Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text('images/pic1.jpg'),
              Text('images/pic2.jpg'),
              Text('images/pic3.jpg'),
            ],
          ),
        ),
        Center(
          child: Container(
            child: Text('Empty Body 2'),
          ),
        ),
        Center(
          child: Container(
            child: Text('DRN1 app is made using Google Flutter. While every attempt was made to make sure that this app works on as many devices as possible. We are unable to test every device. If you have issues running this app please let us know'),
          ),
        )
      ],
      physics: NeverScrollableScrollPhysics(), // Comment this if you need to use Swipe.
    ),

我想要的是这样的。

body: PageView(
      controller: _myPage,
      onPageChanged: (int) {
        print('Page Changes to index $int');
      },
      children: <Widget>[
       home(),
news() , // this is the main body for home
shows(), // this one shows the class shows() which fetches JSON and returns a different body layout
about(), // about text
  ]

有人知道更好的方法吗？

Answer 1

您可以做的是创建单独的 Dart 文件并将它们导入到您的 main.dart

然后在您的 State 类中定义一个列表，其中包含您要显示的页面

List<Widget> _myPage = <Widget>[Page1class(),Page2class(),Page3class()];
之后，您可以使用下面看起来很干净的代码。使用builder() 方法将允许您根据_myPage的大小创建页面，

return MaterialApp(
  title: 'Flutter Demo',
  home: Scaffold(
    appBar: AppBar(title: Text('sdf')),
    body: PageView.builder(
      itemBuilder: (context, position) => _myPage[position],
      itemCount: _myPage.length,
    ),
  )
);

这是一个示例程序：PageView sample