sliverappbar 的 Flutter 底部让 1 像素的背景
Flutter bottom of sliverappbar let 1 pixel of background
我有一个小问题,我的 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,
),
],
),
);
}
}
您是在谈论本机设备状态栏吗?
如果是,则先导入服务
import 'package:flutter/services.dart';
然后将其添加到主函数
SystemChrome.setEnabledSystemUIOverlays([])
经过几天的努力解决这个问题,我终于采用了一个没有 sliverappbar 的新解决方案,而且效果很好!
我刚刚做了一个有两个 positionned 的堆栈。
第一个只显示带有填充的 singlechildscrollview,第二个是 header 出现在滚动条上。
感谢所有贡献者!
我有一个小问题,我的 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,
),
],
),
);
}
}
您是在谈论本机设备状态栏吗?
如果是,则先导入服务
import 'package:flutter/services.dart';
然后将其添加到主函数
SystemChrome.setEnabledSystemUIOverlays([])
经过几天的努力解决这个问题,我终于采用了一个没有 sliverappbar 的新解决方案,而且效果很好! 我刚刚做了一个有两个 positionned 的堆栈。 第一个只显示带有填充的 singlechildscrollview,第二个是 header 出现在滚动条上。
感谢所有贡献者!