从子级回调到父级Flutter

时间:2019-07-06 17:11:54

标签: flutter dart flutter-layout

我是新手。我正在尝试将bottomappbar小部件与我的主屏幕分开。问题是,我需要将索引发送回主屏幕文件,以便可以切换屏幕主体。我最近一直在学习BloC,但是即使我打算在应用程序的其他部分中使用它,我也认为这是一个过高的选择(希望这是正确的假设)。那么,如何将索引发送给父级?

父母

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(),
    );
  }
}

孩子

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,
      ),
    );
  }
}

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

1 个答案:

答案 0 :(得分: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,
      ),
    );
  }
}