Question

我是新手。我正在使用SingleChildScrollView创建一个新页面。

我的问题是仅在激活滚动时如何更改状态栏的颜色？

我已经从here看到了这种效果，但这是条码。

每次滚动移动到某个偏移量时，状态栏颜色就会更改。

这是我想要实现的示例图片：screenshoot

这是我的基本代码：

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....
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }


}

Answer 1

尝试了一些代码之后，我发现了使用Inkino应用程序的解决方案实现。

这是工作代码：

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(),
        ],
      ),
    );
  }
}

，这里是 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),
      ),
    );
  }
}

Flutter：使用SingleChildScrollView滚动时如何更改状态栏颜色

1 个答案: