sliverappbar 的 Flutter 底部让 1 像素的背景

Question

我有一个小问题，我的 header 中有时会显示一个 1 像素的条，如下图所示。

我的代码如下。第一个功能只是为用户计算滚动以获得漂亮的动画。 1 像素被蓝色包围。如果有人能解决这个问题我会很自豪^^'...

import 'package:flutter/material.dart';
import 'package:flutter_share/flutter_share.dart';

class _CustomHeaderState extends State<CustomHeader> {
  ScrollController _scrollController;
  double heightHeader = 0;
  _scrollListener() {
    if (_scrollController.hasClients) {
      double calcul2 = 2 / ((300 - kToolbarHeight) / _scrollController.offset);
      if (calcul2 < 0 && heightHeader != 0) {
        setState(() {
          heightHeader = 0;
        });
      } else if (calcul2 > 2 && heightHeader != 2) {
        setState(() {
          heightHeader = 2;
        });
      } else if (calcul2 >= 0 && calcul2 <= 2) {
        if (heightHeader != calcul2) {
          setState(() {
            heightHeader = calcul2;
          });
        }
      }
    }
  }

  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // extendBody: true,
      body: CustomScrollView(
        controller: _scrollController,
        slivers: [
          SliverAppBar(
            primary: true,
            pinned: true,
            automaticallyImplyLeading: false,
            backgroundColor: Colors.white,
            title: Text(""),
            // elevation: 0,
            expandedHeight: 300,
            flexibleSpace: FlexibleSpaceBar(
              background: widget.image,
            ),
            actions: [//header changed when scroll],
            bottom: PreferredSize(
              preferredSize: Size(MediaQuery.of(context).size.width, 0),
              child: Container(
                margin: EdgeInsets.zero,
                padding: EdgeInsets.zero,
                height: heightHeader >= 1.75 ? 25 - ((heightHeader - 1.75) * 100) : 25,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(25),
                    topRight: Radius.circular(25),
                  ),
                ),
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: widget.child,
          ),
        ],
      ),
    );
  }
}

Answer 1

您是在谈论本机设备状态栏吗？

如果是，则先导入服务

import 'package:flutter/services.dart';

然后将其添加到主函数

SystemChrome.setEnabledSystemUIOverlays([])

Answer 2

经过几天的努力解决这个问题，我终于采用了一个没有 sliverappbar 的新解决方案，而且效果很好！我刚刚做了一个有两个 positionned 的堆栈。第一个只显示带有填充的 singlechildscrollview，第二个是 header 出现在滚动条上。

感谢所有贡献者！

sliverappbar 的 Flutter 底部让 1 像素的背景

Flutter bottom of sliverappbar let 1 pixel of background

flutter

flutter-sliverappbar