Drawer Widget - 更改 Scaffold 主體內容

Question

使用 Flutter Scaffold.Drawer 時 - 是否可以讓 Drawer 中的鏈接更改頁面上的內容 (Scaffold.body)？

我嘗試用有狀態的狀態來做，但無法完成。 這是我的

main.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 中的主體。 是否可以 ？

Answer 1

你可以通過做這樣的事情來做到這一點

首先創建一個小部件列表，這些小部件將包含您想要顯示為Scaffold body的小部件。 現在您還需要一個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：

導入 'package:flutter/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]);
  }
}