Flutter 从侧边抽屉更改 Scaffold 主体

huangapple go评论67阅读模式
英文:

Flutter change scaffold body from side drawer

问题

我正在尝试在Flutter的侧边抽屉中更改Scaffold主体的内容。我正在使用不同的文件来存储侧边导航栏和新的主体内容。

我已经创建了一个单独的文件,其中包含一个名为NavigationController的类,其中包含一个用于在Scaffold主体中显示的小部件的静态变量。

我使用不同的文件来更好地组织代码。

提前感谢您的任何建议。

变量正在得到更新,我已经使用print函数进行了测试。

另外,我能够在单击侧边导航栏上的按钮后更改屏幕的内容,如果我在页面上按下一个执行setState的按钮。

因此,似乎在按下侧边导航栏上的按钮时执行的setState不会刷新主页面。

主应用程序:

import 'package:flutter/material.dart';
import 'package:playground/sidenav.dart';
import 'package:playground/pagecontroller.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const SideNav(),
      appBar: AppBar(),
      body: NavigationController.currentPage,
    );
  }
}

导航控制器:

import 'package:flutter/material.dart';

class NavigationController {
  static Widget currentPage = const Text("Hello World");
}

侧边抽屉小部件:

import 'package:flutter/material.dart';
import 'package:playground/pagecontroller.dart';
import 'package:playground/newbody.dart';

class SideNav extends StatefulWidget {
  const SideNav({Key? key});

  @override
  State<SideNav> createState() => _SideNavState();
}

class _SideNavState extends State<SideNav> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: ListView(children: <Widget>[
      ListTile(
          title: const Text('Page 1'),
          onTap: () {
            setState(() {
              NavigationController.currentPage = const NewBody();
              Navigator.pop(context);
            });
          })
    ]));
  }
}

希望对您有所帮助。

英文:

I am trying to change the content of the Scaffold body from the side drawer in Flutter. I am using different files to store the side navigation bar and new body contents.

I have created a separate file with a class NavigationController, which contains a static variable for the widget to be displayed in the body of the scaffold.

I am using different files to have better organisation.

Thanks in advance and any suggestions are highly appreciated.

The variable is getting updated as I have tested using the print function.

Also I am able to change the contents of the screen after clicking the button in the side navigation bar if i press a button on the page which does a set state.

So it seems that the set state I am executing when pressing the button in the side navigation bar is not refreshing the main page.

Main App:

import &#39;package:flutter/material.dart&#39;;
import &#39;package:playground/sidenav.dart&#39;;
import &#39;package:playground/pagecontroller.dart&#39;;

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State&lt;MyApp&gt; createState() =&gt; _MyAppState();
}

class _MyAppState extends State&lt;MyApp&gt; {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const SideNav(),
      appBar: AppBar(),
      body: NavigationController.currentPage,
    );
  }
}

Navigation controller:

import &#39;package:flutter/material.dart&#39;;

class NavigationController {
  static Widget currentPage = const Text(&quot;Hello World&quot;);
}

Side Drawer Widget:

import &#39;package:flutter/material.dart&#39;;
import &#39;package:playground/pagecontroller.dart&#39;;
import &#39;package:playground/newbody.dart&#39;;

class SideNav extends StatefulWidget {
  const SideNav({super.key});

  @override
  State&lt;SideNav&gt; createState() =&gt; _SideNavState();
}

class _SideNavState extends State&lt;SideNav&gt; {
  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: ListView(children: &lt;Widget&gt;[
      ListTile(
          title: const Text(&#39;Page 1&#39;),
          onTap: () {
            setState(() {
              NavigationController.currentPage = const NewBody();
              Navigator.pop(context);
            });
          })
    ]));
  }
}

答案1

得分: 0

希望你一切都好。

setState 刷新的是 SideNav 而不是主要的小部件。
你需要使用更好的解决方案,尝试了解状态管理和提供者。

建议使用 Flutter providerFlutter cubit
你可以通过创建一个带有监听器的主页来实现这一点,以监视来自提供者的任何更改,并使用新的小部件重新加载小部件。

英文:

hope you are fine.

setState is refreshing `SideNav` and not the main widget.

You have to use a better solution, try to read about state management and providers.

recommend to use Flutter provider or Flutter cubit
you can achieve this by creating a home page with a listener -> watching any change that comes from the provider and reloading the widget with a new one.

huangapple
  • 本文由 发表于 2023年3月4日 00:20:01
  • 转载请务必保留本文链接:https://go.coder-hub.com/75629516.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定