颤振上另一个片段的片段导航

Question

这在颤振中是否可能像我们在 android 中那样从一个片段导航到另一个片段？

AppCompatActivity activity = (AppCompatActivity) view.getContext();
Fragment myFragment = new MyFragment();
activity.getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, myFragment).addToBackStack(null).commit();

在我的代码中，我喜欢导航内页

import 'package:app/src/pages/home.dart';
import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Demo',
      theme: new ThemeData(
        primarySwatch: Colors.green,
      ),
      home: new HomePage(title: 'Demo')
    );
  }
}

./pages/home.dart

import 'package:app/src/fragments/events.dart';
import 'package:app/src/fragments/home.dart';
import 'package:flutter/material.dart';


class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final drawerItems = [
    new DrawerItem("Home", Icons.home),
    new DrawerItem("Events", Icons.event),
    new DrawerItem("Exit", Icons.exit_to_app)
  ];

  final String title;

  @override
  _HomePageState createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {

  int _selectedDrawerIndex = 0;

  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return new HomeFragment();
      case 1:
        return new EventsFragment();
      default:
        return new Center(
          child: new Text("Error"),
        );
    }
  }

  _onSelectItem(int index) {
    setState(() => _selectedDrawerIndex = index);
    Navigator.of(context).pop(); // close the drawer
  }

  @override
  Widget build(BuildContext context) {

    var drawerOptions = new List<Widget>();
    for (var i = 0; i < widget.drawerItems.length; i++) {
      var d = widget.drawerItems[i];
      drawerOptions.add(
        new ListTile(
          leading: new Icon(d.icon),
          title: new Text(d.title),
          selected: i == _selectedDrawerIndex,
          onTap: () => _onSelectItem(i),
        )
      );
    }

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.drawerItems[_selectedDrawerIndex].title),
      ),
      drawer: new Drawer(
        child: new Column(
          children: <Widget>[
            new UserAccountsDrawerHeader(
                accountName: new Text("User"), 
                accountEmail: new Text('user@gmail.com')
                ),
            new Column(children: drawerOptions)
          ],
        ),
      ),
      body: _getDrawerItemWidget(_selectedDrawerIndex),
    );
  }
}

class DrawerItem {
  String title;
  IconData icon;
  DrawerItem(this.title, this.icon);
}

./fragments/home.dart

import 'package:flutter/material.dart';

class HomeFragment extends StatelessWidget {

  final List<Widget> list = const <Widget>[
    const HomePageMenu("News", Icons.announcement),
    const HomePageMenu("Events", Icons.event),    
  ];

  @override
  Widget build(BuildContext context) {
    return new GridView.count(
      padding: const EdgeInsets.all(20.0),
      crossAxisCount:3,
      children: list
    );
  }
}

class HomePageMenu extends StatelessWidget {

  const HomePageMenu(this.menuName, this.menuIcon);

  final String menuName;
  final IconData menuIcon;

  @override
  Widget build(BuildContext context) {
    return new GridTile(
            child: new Card(
              color: Colors.red,
              child: new Center(
                child: new FlatButton(
                  child: new Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      new Icon(this.menuIcon, size: 40.0, color: Colors.green.shade100),
                      new Text(this.menuName),                  
                    ],
                  ), onPressed: () {
                    print("hello");
                  },
                ) 
              )
            ),
      );
  }

}

./fragments/events.dart

import 'package:flutter/material.dart';
class EventsFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text("Events"),
    );
  }
}

如果我单击 ./fragments/home.dart 中的事件，那么它将显示 ./fragments/events.dart 中的内容，就像我们在 android 中所做的那样

Answer 1

我尝试用类似的结构模仿 Android 导航样式

AppNavigator(
   SplashScreen(),
   HomeWidget(          // activity
      WidgetNavigator(
         HomeScreen1(), // fragment
         HomeScreen2(), 
         HomeScreen3(),
      ),
   ),
   OtherWidget(),
)

在此处查看代码并预览：

https://github.com/MichaelGuldborg/FlutterNestedNavigation

Answer 2

您可以从子小部件（您的任何片段）设置对父小部件的回调，在本例中为 HomePage，当从您的子小部件中选择事件时，您可以调用该回调。

例子：

class HomeFragment extends StatelessWidget {

   final VoidCallback onEventsSelected;

   HomeFragment({this.onEventsSelected});
    ...
    child: new FlatButton(
          ...
          onPressed: () {
               print("hello");
               widget.onEventsSelected();
           },
           ...
    )
}

当您调用 HomeFragment 小部件时，在您的 HomePage 中：

_getDrawerItemWidget(int pos) {
   ...
   return HomeFragment(onEventsSelected: () {
      print('Events was selected');
   });
   ...
}