Flutter Navdrawer手柄

iecba09b  于 2023-06-30  发布在  Flutter
关注(0)|答案(1)|浏览(104)

nav_drawer.dart

import 'package:flutter/material.dart';

class NavDrawer extends StatelessWidget {
  final int selectedTileIndex;
  final Function(int) onTileTap;
  NavDrawer({required this.selectedTileIndex, required this.onTileTap});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                fit: BoxFit.fill,
                image: AssetImage('assets/images/cover.jpg'),
              ),
            ),
            child: Center( // Updated
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CircleAvatar(
                    radius: 40,
                    backgroundImage: NetworkImage('https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&quality=85&auto=format&fit=max&s=a52bbe202f57ac0f5ff7f47166906403'),
                  ),
                  SizedBox(height: 10),
                  Text(
                    'name',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                  SizedBox(height: 5),
                  Text(
                    'phone',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 15,
                    ),
                  ),
                ],
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text('主頁'),
            tileColor: selectedTileIndex == 0 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(0),
          ),
          ListTile(
            leading: Icon(Icons.work),
            title: Text('工作資訊'),
            tileColor: selectedTileIndex == 1 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(1),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text('個人資料'),
            tileColor: selectedTileIndex == 2 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(2),
          ),
          ListTile(
            leading: Icon(Icons.info),
            title: Text('關於我們'),
            tileColor: selectedTileIndex == 3 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(3),
          ),
          ListTile(
            leading: Icon(Icons.warning),
            title: Text('救生員需知'),
            tileColor: selectedTileIndex == 4 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(4),
          ),
          ListTile(
            leading: Icon(Icons.description),
            title: Text('拯溺考試資訊'),
            tileColor: selectedTileIndex == 5 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(5),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('設置'),
            tileColor: selectedTileIndex == 6 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(6),
          ),
          ListTile(
            leading: Icon(Icons.border_color),
            title: Text('意見'),
            tileColor: selectedTileIndex == 7 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(7),
          ),
          ListTile(
            leading: Icon(Icons.login),
            title: Text('Login'),
            onTap: () => onTileTap(8),
          ),
        ],
      ),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:hklifeguard/page/about_us.dart';
import 'package:hklifeguard/page/error_page.dart';
import 'package:hklifeguard/page/feedback.dart';
import 'package:hklifeguard/page/jobs.dart';
import 'package:hklifeguard/page/lifeguard_notice.dart';
import 'package:hklifeguard/page/lifesaving_exam_info.dart';
import 'package:hklifeguard/page/profile.dart';
import 'package:hklifeguard/page/setting.dart';
import 'package:hklifeguard/widgets/nav_drawer.dart';
import 'package:hklifeguard/theme/theme.dart';
import 'package:hklifeguard/page/login.dart';
import 'package:hklifeguard/page/home.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),

      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedTileIndex = 0;
  String _appBarTitle = 'Home';

  //get NavDrawer listtile index & switch page
  void _onTileTap(int index) {
    setState(() {
      _selectedTileIndex = index;
      switch (_selectedTileIndex) {
        case 0:
          _appBarTitle = '主頁';
          break;
        case 1:
          _appBarTitle = '工作';
          break;
        case 2:
          _appBarTitle = '個人資料';
          break;
        case 3:
          _appBarTitle = '關於我們';
          break;
        case 4:
          _appBarTitle = '救生員需知';
          break;
        case 5:
          _appBarTitle = '拯溺考試資訊';
          break;
        case 6:
          _appBarTitle = '設置';
          break;
        case 7:
          _appBarTitle = '意見';
          break;
        default:
          _appBarTitle = 'Error';
          break;
      }
    });
    Navigator.of(context).pop();
  }

  //page navigator
  Widget _getBodyWidget() {
    switch (_selectedTileIndex) {
      case 0:
        return Home();
      case 1:
        return Jobs();
      case 2:
        return Profile();
      case 3:
        return About_Us();
      case 4:
        return Lifeguard_Notice();
      case 5:
        return Lifesaving_Exam_Info();
      case 6:
        return Setting();
      case 7:
        return FeedBack();
      case 8:
        return _getBodyWidget();
      default:
        return ErrorPage();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: NavDrawer(selectedTileIndex: _selectedTileIndex, onTileTap: _onTileTap),
      appBar: AppBar(
        title: Text(_appBarTitle),
      ),
      body: _getBodyWidget(),
    );
  }
}

这是一个带有Navdrawer的页面。我想留在当前页面,并创建用户登录时,用户点击login列表平铺覆盖页。但是,我返回_getBodyWidget(),它将显示错误消息,指示invalid argument: Maximum call stack size exceeded。如何正确使用导航器
还有,我想问一下怎样才能更好地构造代码

oaxa6hgo

oaxa6hgo1#

通过在_getBodyWidget()内部调用_getBodyWidget(),您正在创建一个无限循环
也许这样的工作:

class _MyHomePageState extends State<MyHomePage> {
  int _selectedTileIndex = 0;
  String _appBarTitle = 'Home';
  Widget? currentPage;

  //get NavDrawer listtile index & switch page
  void _onTileTap(int index) {
    setState(() {
      _selectedTileIndex = index;
      switch (_selectedTileIndex) {
        case 0:
          _appBarTitle = '主頁';
          break;
        case 1:
          _appBarTitle = '工作';
          break;
        case 2:
          _appBarTitle = '個人資料';
          break;
        case 3:
          _appBarTitle = '關於我們';
          break;
        case 4:
          _appBarTitle = '救生員需知';
          break;
        case 5:
          _appBarTitle = '拯溺考試資訊';
          break;
        case 6:
          _appBarTitle = '設置';
          break;
        case 7:
          _appBarTitle = '意見';
          break;
        default:
          _appBarTitle = 'Error';
          break;
      }
    });
    Navigator.of(context).pop();
  }

  //page navigator
  Widget? _getBodyWidget() {
    switch (_selectedTileIndex) {
      case 0:
        return Home();
      case 1:
        return Jobs();
      case 2:
        return Profile();
      case 3:
        return About_Us();
      case 4:
        return Lifeguard_Notice();
      case 5:
        return Lifesaving_Exam_Info();
      case 6:
        return Setting();
      case 7:
        return FeedBack();
      case 8:
        return null;
      default:
        return ErrorPage();
    }
  }

  @override
  Widget build(BuildContext context) {
    currentPage = _getBodyWidget() ?? currentPage;
    return Scaffold(
      drawer: NavDrawer(selectedTileIndex: _selectedTileIndex, onTileTap: _onTileTap),
      appBar: AppBar(
        title: Text(_appBarTitle),
      ),
      body: currentPage!,
    );
  }
}

相关问题