如何将我的 Hero-Widget-Page 插入到 BottomNavigationBar？

Question

我正在尝试构建一个带有底部导航栏的应用程序，我的主屏幕在第一个选项卡上，我的 Hero-Widget-Page 在另一个选项卡上。 问题是，我需要在我的 Hero 小部件中使用 context 变量，并且通过将 List<Widget> 用于不同的 BottomNavigationBar 页面，我只能显示简单的小部件，例如 Text。

´´´飞镖

class _MyHomePageState extends State<MyHomePage>
{

  int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
  Text(  // on this place i wanna add what is in the body now
    'Home',
    style: optionStyle,
  ),
  Text(
     'Devices',
     style: optionStyle,
  )
 ];

void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: color_1,
        title: Text("Device Manager"),
      ),
      body: Row( // here i wanna insert _widgetOptions.elementAt(_selectedIndex) instead of the Herowidget itself
        children: [
        Hero(
        tag: 'matrix1',
        child: GestureDetector(
          onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageOne())),
          child: Column(
                  children: <Widget>[
                          Image(  image: new AssetImage('imgs/matrix1.png'),
                                  height: 100,
                                  width: 100,),
                          Text("Matrix Kitchen", style: mytextStyle,),
                ]
              )
            ),
          ),
        Hero(
        tag: 'matrix2',
        child: GestureDetector(
          onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageTwo())),
          child: Column(
                  children: <Widget>[
                          Image(  image: new AssetImage('imgs/matrix2.png'),
                                  height: 100,
                                  width: 100,),
                          Text("PARTY ROOM", style: mytextStyle,),
                ]
              )
            ),
          ),
        ] // wrap children
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: color_1,
        currentIndex: _selectedIndex,
        selectedItemColor: color_2,
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.devices),
              title: Text("Home")),
            BottomNavigationBarItem(
              icon: Icon(Icons.devices),
              title: Text("Devices"))
        ]

        )
    );
  } // Widget build
} // class _MyHomePageState
}

´´´

这样，Hero 小部件将显示在两个页面上，因此 bottomNavigationBar 不起作用。 我感谢所有有想法的人，从 2 天开始就已经在尝试了！

Answer 1

这应该适合你

class _MyHomePageStateState extends State<MyHomePageState> {
    static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

    final _widgetOptions = <Widget>[
        HeroPageHome(),
        HeroPageDevices()
    ];

    int _selectedIndex = 0;

    void _onItemTapped(int index) {
        setState(() {
            _selectedIndex = index;
        });
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                backgroundColor: color_1,
                title: Text("Device Manager"),
            ),
            body: _widgetOptions.elementAt(_selectedIndex),
            bottomNavigationBar: BottomNavigationBar(
                backgroundColor: color_1,
                currentIndex: _selectedIndex,
                selectedItemColor: color_2,
                onTap: _onItemTapped,
                items: const <BottomNavigationBarItem>[
                    BottomNavigationBarItem(
                        icon: Icon(Icons.devices),
                        title: Text("Home")
                    ),
                    BottomNavigationBarItem(
                        icon: Icon(Icons.devices),
                        title: Text("Devices")
                    )
                ]

            )
        );
    }
}

请注意，我为您的 Hero 页面创建了单独的类。

class HeroPageHome extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Hero(
            tag: 'matrix1',
            child: GestureDetector(
                onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageOne())),
                child: Column(
                    children: <Widget>[
                        Image(  image: new AssetImage('imgs/matrix1.png'),
                            height: 100,
                            width: 100,
                        ),
                        Text("Matrix Kitchen", style: mytextStyle,),
                    ]
                )
            ),
        );
    }
}

class HeroPageDevices extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Hero(
            tag: 'matrix2',
            child: GestureDetector(
                onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => MatrixPageTwo())),
                child: Column(
                    children: <Widget>[
                        Image(  image: new AssetImage('imgs/matrix2.png'),
                            height: 100,
                            width: 100,

                        ),
                        Text("PARTY ROOM", style: mytextStyle,),
                    ]
                )
            ),
        );
    }
}