首页 > 解决方案 > Flutter - 使用固定小部件滚动

问题描述

我想做一个将地图部分固定在顶部的滚动,一旦我向上滚动这些小部件就可以覆盖在地图的顶部。

我试图做滚动效果。我使用带有一个容器(地图)和一个 SingleChildScroll 的堆栈。但是在我将 SingleChildScroll 放在地图顶部后,地图无法点击。

那么有什么方法可以解决这个问题吗?有什么建议我可以做这个设计吗?非常感谢!

这是正常的看法

在我向上滚动一点之后

这是代码

return Scaffold(
  key: _scaffoldKey,
  backgroundColor: ThemeColors.orangeYellow,
  floatingActionButton: Padding(
    padding: EdgeInsets.only(right: 30),
    child: Row(
      children: [
        _profileButton,
      ],
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.startTop,
 
  body: Stack(
    children: [
      Positioned(
        top: 0,
        child: Stack(
          alignment: Alignment.bottomCenter,
          overflow: Overflow.visible,
          children: <Widget>[
            Container(),
            _map,
            _nearbyRestaurantBox,
            _getCurrentLocationButton,
          ],
        ),
      ),
      SingleChildScrollView(
        physics: ClampingScrollPhysics(),
        child: Column(
          children: <Widget>[
            Column(
              // alignment: Alignment.bottomCenter,
              // overflow: Overflow.visible,
              children: <Widget>[
                // Container(),
                // _map,
                Padding(
                  padding: EdgeInsets.only(top: _mapHeight - 70),
                ),
                Stack(
                  children: [
                    Column(
                      children: [
                        SizedBox(
                          height: 70,
                          // child: Container(
                          //     // color: Colors.green,
                          //     ),
                        ),
                        SizedBox(
                          height: 70,
                          child: Container(
                            color: Colors.amber,
                          ),
                        )
                      ],
                    ),

                    // Padding(
                    //   padding: EdgeInsets.only(top: 35),
                    // ),
                    Container(
                      alignment: Alignment.center,
                      child: Padding(
                        padding: EdgeInsets.only(top: 5),
                        child: _searchBox,
                      ),
                    )
                  ],
                ),
                // Positioned(top: 0, child: _map),
                // _searchBox,
                // _nearbyRestaurantBox,
                // _getCurrentLocationButton,
              ],
            ),
            Container(
              color: ThemeColors.orangeYellow,
              child: Center(
                child: Column(
                  children: <Widget>[
                    _categoryBox,
                    ..._buildBanners(),
                  ],
                ),
              ),
            ),
          ],
        ),
      )
    ],
  ),
);

标签: flutter

解决方案


推荐阅读