Question

好，所以我已经完成了以下bottomNavigationBar的工作，但是对我来说还不够干净，我希望有人知道更好的方法。

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

但是我想让每个部分都位于不同的类中，以保持其整洁（最好是新的.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

Flutter bottomNavigationBar（仅更改主体部分）

1 个答案: