flutter - Flutter 子级对父级的回调

Question

我是新手。我正在尝试将 bottomappbar 小部件与我的主屏幕分开。问题是，我需要将索引发送回主屏幕文件，以便切换屏幕主体。我最近一直在学习 BloC，但我认为这对这种情况来说有点矫枉过正，即使我打算在应用程序的其他部分使用它(希望这是正确的假设)。那么，如何将索引发送给父级呢？

parent

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;
  final _bottomNavigationPages = [
    Screen1(),
    Screen2(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(
          color: Colors.blueGrey,
        ),
        title:
            Text('xxx', style: new TextStyle(fontWeight: FontWeight.w400)),
      ),
      body: _bottomNavigationPages[_selectedIndex],
      bottomNavigationBar: HomeBottomAppBar(),
    );
  }
}

child

class HomeBottomAppBar extends StatefulWidget {
  @override
  _HomeBottomAppBarState createState() => _HomeBottomAppBarState();
}

class _HomeBottomAppBarState extends State<HomeBottomAppBar> {
  int _selectedIndex = 0;

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

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 5.0,
      clipBehavior: Clip.antiAlias,
      child: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.x), title: Text("1")),
          BottomNavigationBarItem(
              icon: Icon(Icons.x), title: Text("2")),
        ],
        currentIndex: _selectedIndex,
        onTap: _itemTapped,
      ),
    );
  }
}

此外，我假设这是一种很好的做法。也许将所有内容都放在同一个文件中会更好。

Answer 1

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;
  final _bottomNavigationPages = [
    Screen1(),
    Screen2(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: IconThemeData(color: Colors.blueGrey),
        title: Text('xxx', style: new TextStyle(fontWeight: FontWeight.w400)),
      ),
      body: _bottomNavigationPages[_selectedIndex],
      bottomNavigationBar: HomeBottomAppBar(refresh: _refresh),
    );
  }

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

class HomeBottomAppBar extends StatefulWidget {
  final Function refresh;

  const HomeBottomAppBar({Key key, this.refresh}) : super(key: key);

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

class _HomeBottomAppBarState extends State<HomeBottomAppBar> {
  int _selectedIndex = 0;

  void _itemTapped(int index) {
    _selectedIndex = index;
    widget.refresh(index);
  }

  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 5.0,
      clipBehavior: Clip.antiAlias,
      child: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.x), title: Text("1")),
          BottomNavigationBarItem(icon: Icon(Icons.x), title: Text("2")),
        ],
        currentIndex: _selectedIndex,
        onTap: _itemTapped,
      ),
    );
  }
}