Question

在app_bar.dart文件中，提到了仰角控制应用栏下方阴影的大小，并且默认情况下，如果没有内容在AppBar下滚动，则不会绘制阴影。

这是我的代码：

Scaffold(
  appBar: AppBar(
    brightness: Brightness.light,
    backgroundColor: Colors.grey[50],
    leading: IconButton(
      icon: Icon(Icons.menu, color: Colors.blue),
      tooltip: 'Navigation menu',
      onPressed: null,
    ),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.search, color: Colors.blue,),
        tooltip: 'Search',
        onPressed: null,
      ),
    ],
  ),
  body: listView,
);

在我的情况下，总是会留下阴影！有办法解决这个问题还是我做错了什么？
谢谢

Answer 1

通过更改滚动行为来消除整个效果

  body: ScrollConfiguration(
    behavior: const ScrollBehavior(),
    child: listview,
  ),

正常：没有效果：

Answer 2

实际上，SliverAppBar完全使用这种行为，即在内容未滚动到其下方时没有阴影，并且如果您希望它甚至可以在滚动内容时滚动。以下视频说明了如何在Flutter应用程序中使用薄片：https://www.youtube.com/watch?v=wN2lpqxkB4M

此外，如果您只希望AppBar没有阴影，可以将其height属性设置为0.0，如下所示：

h2o.mojo_predict_df

Answer 3

迭戈·维拉斯奎兹（Diego Velasquez）对此有great article。

基本上，您想要的是将可滚动列表视图和具有其elevation值的应用栏连接起来。并且当可滚动屏幕的位置在“顶部”时-将高程值设置为0，否则设置为默认值（4）。使用ScrollController()小部件很容易。

//empty_space is a distance of empty padding, only after scrolling through it the content starts getting under the app bar. 
static const double EMPTY_SPACE = 10.0;
ScrollController _controller;
bool isScrolledToTop = true;

@override
  void initState() {
    _controller = ScrollController();
    _controller.addListener(_scrollListener);
    super.initState();
  }

  _scrollListener() {
    if (_scrollController.offset <= _scrollController.position.minScrollExtent &&
        !_scrollController.position.outOfRange) {
      //call setState only when values are about to change
      if(!isScrolledToTop) {
        setState(() {
          //reach the top
          isScrolledToTop = true;
        });
      }

    }else{
      //call setState only when values are about to change
      if(_scrollController.offset > EMPTY_SPACE && isScrolledToTop) {
        setState(() {
          //not the top
          isScrolledToTop = false;
        });
      }
    }
  }

 @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
}

现在将控制器添加到您的列表视图中，它应该看起来像这样：

    ListView.builder(
              controller: _scrollController,
              itemCount: 30,
              itemBuilder: (context, index) {
                return ListTile(title: Text("Index : $index"));
              },
            )

最后一步是根据isScrolledToTop标志显示/隐藏应用栏的阴影：

appBar: AppBar(
      elevation: isScrolledToTop ? 0 : 4,
      ...,)

重要：我强烈建议您使用自己的build（）方法（MyAppBar extends StatefulWidget implements PreferredSizeWidget）将AppBar创建为独立的小部件，然后在其中移动_scrollListener()方法。

由于setState(){}方法会强制在调用小部件的位置重建它，因此无论是重建整个Page（具有主列表视图及其所有项目等）还是仅重建一个AppBar小部件，这都很重要。后者便宜得多。

如果您需要更多详细信息，请ping我。干杯！

当没有内容滚动时如何禁用AppBar阴影

3 个答案: