如何更新以背景作为主应用程序菜单的 Flutter 应用程序的布局

Question

我是 Flutter 的新手，所以请接受我对一个愚蠢问题的道歉（可能是愚蠢的）。我的问题是，如果为我的应用程序菜单实施背景，我是否能够用新屏幕更新任何特定屏幕。例如，如果我在 android 上看到一个带有背景的应用程序主屏幕，在单击菜单后我会显示一个片段，并且在用户与它进行一些交互之后，我会显示一个不同的片段，具体取决于关于设计和应用程序流程。我的问题是我会在 Flutter 中做什么来更新屏幕而不是使用 MaterialPageRoute 来更改整个屏幕。

Answer 1

如果您不想使用 Navigator，您可以使用 PageView 小部件。

PageController _pageController;
int _page = 0; // initial page index

@override
void initState() {
  super.initState();
  _pageController = PageController(keepPage: true);
}

@override
void dispose() {
  _pageController.dispose();
  super.dispose();
}

void onPageChanged(int value) {
  setState(() {
    this._page = value;
  });
}

void go(int index) {
  _pageController.jumpToPage(index); //this will change the current page in view.
}

然后转到您的背景小部件并进行如下修改。

backLayer: Container(
  color: Colors.blue,
  child: ListView(
    children: <Widget>[
      ListTile(
        title: Text("Screen two"),
        onTap: () {
          go(1); //page index
        },
      ),
      ListTile(
        title: Text("Screen three"),
        onTap: () {
          go(2);
        },
      )
    ],
  ),
),


frontLayer: Container(
  color: Colors.white,
  child: PageView(
    onPageChanged: onPageChanged, //page changed function
    controller: _pageController, //controller
    physics: NeverScrollableScrollPhysics(), //disable swipe
    children: <Widget>[
      HelloScreen(), //put your screens here.
      ScreenTwo(),
      ScreenThree(),
    ],
  ),
),

如何更新以背景作为主应用程序菜单的 Flutter 应用程序的布局

How to Update Layout for a Flutter app with Backdrop as a main app menu

dart

flutter

flutter-layout