[英]Flutter : How to change status bar color when scrolling with SingleChildScrollView
I'm new with flutter. 我是新的扑动者。 I'm creating a new page with SingleChildScrollView.
我正在使用SingleChildScrollView创建一个新页面。
my problem is how to change status bar color only when scrolling active? 我的问题是如何只在滚动激活时更改状态栏颜色?
I've seen this effect from here but this code for sliver. 我已经从这里看到了这个效果,但这个代码适用于条子。
everytime scroll active at some offset, the statusbar color change. 每次在某个偏移处滚动激活,状态栏颜色会发生变化。
here's the example picture what I want achieve : screenshoot 这是我想要实现的示例图片: screenshoot
here's my basic code : 这是我的基本代码:
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
HomeScreen({Key key}) : super(key: key);
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
void initState() {
super.initState();
_scrollController = ScrollController();
_scrollController.addListener(_scrollListener);
}
@override
void dispose() {
_scrollController.removeListener(_scrollListener);
_scrollController.dispose();
super.dispose();
}
void _scrollListener() {
setState(() {
});
}
final image = 'assets/images/bg_header.png';
ScrollController _scrollController;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Stack(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Image.asset(
image,
fit: BoxFit.cover,
),
),
Container(
padding: EdgeInsets.all(40.0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.5,
decoration: BoxDecoration(color: Color.fromRGBO(14, 67, 39, .8)),
),
Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0, top: 25.0),
child: Column(
children: <Widget>[
some content....
],
),
),
],
),
),
);
}
}
after trying some code, i found solution implement using Inkino app. 在尝试了一些代码之后,我找到了使用Inkino app的解决方案。
here's the work code : 这是工作代码:
main.dart main.dart
import 'package:flutter/material.dart';
import 'package:scroll_effects.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
ScrollController _scrollController;
ScrollEffects _scrollEffects;
@override
void initState() {
super.initState();
_scrollController = ScrollController();
_scrollController.addListener(_scrollListener);
_scrollEffects = ScrollEffects();
}
@override
void dispose() {
_scrollController.removeListener(_scrollListener);
_scrollController.dispose();
super.dispose();
}
void _scrollListener() {
setState(() {
_scrollEffects.updateScrollOffset(context, _scrollController.offset);
});
}
Widget _buildStatusBarBackground() {
final statusBarColor = Theme.of(context).primaryColor;
return Container(
height: _scrollEffects.statusBarHeight,
color: statusBarColor,
);
}
@override
Widget build(BuildContext context) {
final content = <Widget>[
**list widget.....**
];
content.add(const SizedBox(height: 32.0));
final scrollview = CustomScrollView(
physics: ClampingScrollPhysics(),
controller: _scrollController,
slivers: [
SliverList(delegate: SliverChildListDelegate(content)),
],
);
return Scaffold(
// backgroundColor: const Color(0xFFF0F0F0),
body: Stack(
children: [
scrollview,
_buildStatusBarBackground(),
],
),
);
}
}
and here's scroll_effects.dart : 这是scroll_effects.dart :
import 'dart:math';
import 'package:flutter/material.dart';
class ScrollEffects {
static const double kHeaderHeight = 225.0;
ScrollEffects() {
updateScrollOffset(null, 0.0);
}
double _scrollOffset;
double statusBarHeight;
void updateScrollOffset(BuildContext context, double offset) {
_scrollOffset = offset;
_recalculateValues(context);
}
void _recalculateValues(BuildContext context) {
statusBarHeight = _calculateStatusBarHeight(context);
}
double _calculateStatusBarHeight(BuildContext context) {
double statusBarMaxHeight = 0.0;
if (context != null) {
statusBarMaxHeight = MediaQuery.of(context).padding.top;
}
return max(
0.0,
min(
statusBarMaxHeight,
_scrollOffset - kHeaderHeight + (statusBarMaxHeight * 4),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.