android - 来自另一个 fragment 的 fragment 导航

Question

这在 flutter 中是否可能像我们在 android 中那样从一个 fragment 导航到另一个 fragment ？

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 中的事件，那么它将像我们在 android 中一样显示来自 ./fragments/events.dart 的内容

Answer 1

我试着用类似这样的结构来模仿 Android 的导航风格

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

在此处查看代码并预览:

https://github.com/MichaelGuldborg/FlutterNestedNavigation