Переход на другую страницу из меню ящика и установка заголовка на панель приложения

Question

Я новичок во флаттере и хотел бы, чтобы кто-нибудь помог мне с кодом, который я нашел в github, который я хотел бы использовать.взгляните на ссылку ниже https://github.com/JohannesMilke/drawer_example

Это пример навигационного ящика.Мне нравится, как разработчик его кодировал, и я хотел бы использовать этот пример.проблема в том, что разработчик не реализовал переход на другую страницу.когда вы нажимаете на элемент в ящике, он просто печатает сообщение в консоли.

Я хочу сделать еще один шаг вперед.я хочу изменить код так, чтобы при нажатии на элемент он переходил на другую страницу и ящик закрывался.значок на панели инструментов должен остаться на панели инструментов на новой странице.Кроме того, когда вы переходите на другую страницу, заголовок этой страницы должен быть установлен на панели инструментов.

Когда я посмотрел на код, у меня есть идея, где изменить, но я не увенчался успехом.Я думаю, что мне нужно изменить тег тела в нижней части кода.проблема в том, что я не знаю, как вызвать класс DrawerWidgetState в файле box_widget.dart.

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

class MyApp extends StatelessWidget {
  final String appTitle =  'Ttitle';
  @override
  Widget build(BuildContext context) => MaterialApp(
    title: appTitle,
    theme: ThemeData(
      primaryColor: Colors.red,
      textTheme: TextTheme(
        subhead: TextStyle(
          color: Colors.black.withOpacity(0.4),
        ),
      ),
      dividerColor: Colors.black.withOpacity(0.4),
    ),
    home: MainPage(appTitle: appTitle),
  );
}

class MainPage extends StatefulWidget {
  final String appTitle;

  const MainPage({this.appTitle});

  @override
  MainPageState createState() => MainPageState();
}

class MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(
      title: Text(widget.appTitle),
    ),
    drawer: DrawerWidget(),
    body: container()
  );
}

я определяю следующую функцию в файле box_widget.dart

getDrawerItemWidget(int pos) {
    print('testing');
    switch (pos) {
      case 0:
        return new FirstFragment();
      case 1:
        return new SecondFragment();
      case 2:
        return new ThirdFragment();

      default:
        return new Text("Error");
    }
  }

, но я не знаю, как вызвать ее из тега основной страницы и установить заголовок соответствующим образом.Может ли кто-нибудь помочь изменить код, чтобы я мог nagivate на другую страницу и установить заголовок?полный код в https://github.com/JohannesMilke/drawer_example

заранее спасибо

Answer 1

Используя библиотеку drawer_example, вам нужно внести небольшие изменения, чтобы она заработала.

Добавьте к вашему pocket_widget.dart добавьте это начало:

typedef TitleCallback = void Function(String, int);

Один развы делаете это, ваш Drawer StatefulWidget должен выглядеть следующим образом:

class DrawerWidget extends StatefulWidget {

  final TitleCallback callback;
  final int tabIndex;

  @override
  DrawerWidgetState createState() => DrawerWidgetState();

  DrawerWidget(this.callback, this.tabIndex);
}

и ваш initState:

@override
void initState() {
    selectedDrawerIndex = widget.tabIndex;
    selectedProfileIndex = 0;
    super.initState();
}

Это будет конструктор для передачи нового значения обратно в ваш main.dartfile.

Внутри ListTile вы можете добавить следующую логику:

ListTile(
     leading: Icon(item.icon),
     title: Text(item.name),
     selected: selectedDrawerIndex == currentIndex,
     onTap: () {
         final item = getOffsetIndex(drawerGroups, currentIndex);
         print('Selected index $selectedDrawerIndex with name ${item.name}');

         setState(() {
            selectedDrawerIndex = currentIndex;
            widget.callback(item.name, selectedDrawerIndex);
         });
         Navigator.pop(context); // to close the Drawer
     },
)

Если вы можете проверить, строка: widget.callback(item.name); отправляет имя вкладки по обратному вызову, и эта логика можетприменяться в любом месте, где вы хотите изменить свой заголовок.Это может быть даже жестко закодированный заголовок, например:

widget.callback("Second Tab");

Теперь вернемся к вашему файлу main.dart:

class MyApp extends StatefulWidget {
    final String title;

    ListExample(this.title);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

   List<Widget> _fragments = <Widget> [
       Container(
         child: Text("Fragment One"),
       ),
       Container(
         child: Text("Fragment Two"),
       ),
       Container(
         child: Text("Fragment Three"),
       ),
   ];

  String titleAppBar = "Testing";
  int tabIndex = 0;

  @override
  void initState() {
    setState(() {
      titleAppBar = widget.title;
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: widget.title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(titleAppBar),
        ),
        drawer: DrawerWidget((title, index) {
          setState(() {
            titleAppBar = title;
            tabIndex = index;
          });
        }, tabIndex),
        body: _fragments[tabIndex],
      ),
    );
  }
}

Окончательный результат:

Answer 2

Глядя на пример на GitHub, он слишком усложняет то, что слишком просто с Flutter.

Вот простой пример того, как использовать Drawer на Flutter:

main.dart

import 'package:flutter/material.dart';

import 'another_page.dart';
import 'home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // declaring your routes will allow you to push and remove everything from the stack (including the drawer) with pushNamedAndRemoveUntil()
      routes: {
        'home': (context) => HomePage(),
        'anotherPage': (context) => AnotherPage(),
      },
      initialRoute: 'home',
    );
  }
}

home_page.dart (другая_страница.dart точно такая же для иллюстрации)

import 'package:flutter/material.dart';

import 'menu_drawer.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: MenuDrawer(),
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Home'),
      ),
    );
  }
}

menu_drawer.dart

import 'package:flutter/material.dart';

class MenuDrawer extends StatelessWidget {

  // Push the page and remove everything else
  navigateToPage(BuildContext context, String page) {
    Navigator.of(context).pushNamedAndRemoveUntil(page, (Route<dynamic> route) => false);
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        // This could be mapped from a List of items
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.home),
            title: Text('Home'),
            onTap: () => navigateToPage(context, 'home'),
          ),
          ListTile(
            leading: Icon(Icons.panorama),
            title: Text('Another page'),
            onTap: () => navigateToPage(context, 'anotherPage'),
          ),
        ],
      ),
    );
  }
}

Окончательный результат: