Question

我正在尝试使用Bottomnavigationbar构建一个应用程序，在第一个选项卡上具有主屏幕，在另一个选项卡上具有Hero-Widget-Page。问题是，我需要在Hero小部件中使用context变量，并且对于不同的BottomNavigationBar页面使用List<Widget>时，我只能显示诸如Text之类的简单小部件。

´´´dart

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
}

´´´

与此类似，英雄小部件将同时显示在两个页面上，因此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,),
                    ]
                )
            ),
        );
    }
}

如何将Hero-Widget-Page插入BottomNavigationBar？

1 个答案: