flutter - Drawer Widget - 更改 Scaffold 正文内容

Question

使用 Flutter Scaffold.Drawer 时 - 是否可以让 Drawer 中的链接更改页面上的内容（Scaffold.body）？

我尝试使用有状态的状态进行操作，但无法完成。这是我的

主要.dart

import 'package:flutter/material.dart';
import 'Navbars/navbar.dart';
import 'Pages/settings.dart';

void main() => runApp(MaterialApp(home: Home()));

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Widget widget_for_body = settingsPage();
    return Scaffold(
      appBar: AppBar(
        title: Text("MyApp"),
        centerTitle: true,
        backgroundColor: Colors.redAccent,
      ),
      body: widget_for_body,
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {},
            child: Text("Stage"),
            backgroundColor: Colors.green,
          ),
          FloatingActionButton(
            onPressed: () {},
            child: Text("Dev"),
            backgroundColor: Colors.green,
          ),
        ],
      ),
      drawer: NavBar(),
    );
  }
}

导航栏.dart

import 'package:flutter/material.dart';

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            accountName: Text("User"),
            accountEmail: Text("User Test"),
            currentAccountPicture: CircleAvatar(
              child: ClipOval(
                child: Image.network(
                  'https://oflutter.com/wp-content/uploads/2021/02/girl-profile.png',
                  fit: BoxFit.cover,
                  width: 90,
                  height: 90,
                ),
              ),
            ),
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                  fit: BoxFit.fill,
                  image: NetworkImage(
                      'https://oflutter.com/wp-content/uploads/2021/02/profile-bg3.jpg')),
            ),
          ),
          ListTile(
            leading: Icon(Icons.notifications),
            title: Text('Alerts'),
            onTap: () => {},
            trailing: ClipOval(
              child: Container(
                color: Colors.red,
                width: 40,
                height: 40,
                child: Center(
                  child: Text(
                    'Soon',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 12,
                    ),
                  ),
                ),
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('Settings'),
            // to close the navbar
            onTap: () => {Navigator.of(context).pop()},
          ),
          Divider(),
          ListTile(
            title: Text('Exit'),
            leading: Icon(Icons.exit_to_app),
            onTap: () => null,
          ),
        ],
      ),
    );
  }
}

* stage.dart

import 'package:flutter/material.dart';

class stagePage extends StatelessWidget {
  const stagePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("test2"),
    );
  }
}

当按下抽屉上的设置按钮时，我正在尝试使用 stage.dart 更改 main.dart 中的主体。可能吗 ？

标签： flutterdart

Answer 1

你可以通过做这样的事情来做到这一点

首先创建一个小部件列表，其中包含您想要显示body为Scaffold. 现在您还需要一个int作为索引来在正文中显示小部件。然后，当您点击时，ListTile只需更新方法内的索引setState({})。

正文 1：

import 'package:flutter/material.dart';

class LandingPage extends StatelessWidget {
   LandingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('bruh'),
    );
  }
}

身体 2：

导入“包：颤振/material.dart”；

class SettingsPage extends StatelessWidget {
   SettingsPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('settings'),
    );
  }
}

主页：

 class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);


  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> bodyWidgets = [LandingPage(), SettingsPage()];

  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text('Drawer Header'),
              ),
              ListTile(
                title: const Text('Item 0'),
                onTap: () {
                  setState(() {
                    index = 0;
                    Navigator.pop(context);
                  });
                },
              ),
              ListTile(
                title: const Text('Item 1'),
                onTap: () {
                  setState(() {
                    index = 1;
                    Navigator.pop(context);
                  });
                },
              ),
              ListTile(
                title: const Text('Item 2'),
                onTap: () {
                
                  setState(() {
                    Navigator.pop(context);
                  });
                },
              ),
            ],
          ),
        ),
        body: bodyWidgets[index]);
  }
}