如何在 Flutter 中滚动时删除背景底部导航颜色

Question

我有一个在滚动时隐藏的动画容器（类似于 Pinterest）。我在这两个页面中都有 2 个带有列表视图的页面。当我滚动列表视图时，底部导航栏隐藏，但我可以找到与底部导航栏高度相同的填充。它不动。我什至尝试使用 extendBody: true 但它没有用。我什至将 extendBody: true 添加到两个 ListView 但它没有用。谁能帮忙？

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  double yTransValue = 0;

  int _currentIndex = 0;
  final List<Widget> _children = [
    Landingpage1(),
    LandingPage2(),
  ];

  void onTappedBar(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollUpdateNotification>(
      onNotification: (notification) {

        if (notification.scrollDelta.sign == 1) {
          setState(() {
            yTransValue = 100;
          });
        } else if (notification.scrollDelta.sign == -1) {
          setState(() {
            yTransValue = 0;
          });
        }
      },
      child: Scaffold(
        extendBody: true,
        body: _children[_currentIndex],
        bottomNavigationBar: AnimatedContainer(
          duration: Duration(milliseconds: 300),
          transform: Matrix4.translationValues(0, yTransValue, 0),
          child: SizedBox(
            height: 60,
            child: BottomNavigationBar(
              fixedColor: Colors.red,
              onTap: onTappedBar,
              currentIndex: _currentIndex,
              items: [
                BottomNavigationBarItem(
                  icon: Icon(
                    Icons.home,
                    size: 20.0,
                  ),
                  title: Text(
                    "",
                    style: TextStyle(height: 0.0),
                  ),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.arrow_circle_down),
                  title: Text(
                    "",
                    style: TextStyle(height: 0.0),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

尝试为您的SizedBox 使用变量height：

height: 100 - yTransValue,

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollUpdateNotification>(
      onNotification: (notification) {...},
      child: Scaffold(
        extendBody: true,
        body: _children[_currentIndex],
        bottomNavigationBar: AnimatedContainer(
          duration: Duration(milliseconds: 300),
          transform: Matrix4.translationValues(0, yTransValue, 0),
          child: SizedBox(
            height: 100 - yTransValue,
            child: BottomNavigationBar(...)
          ),
        ),
      ),
    );
  }
}