flutter 如何将背景图像设置为CustomScrollView

hof1towb  于 2023-03-31  发布在  Flutter
关注(0)|答案(1)|浏览(272)

我想设置背景图像为CustomScrollView与重复(像css的背景图像重复),并需要图像跟随滚动。
我试了下面的代码,我可以设置背景图像,但图像不跟随滚动.

Widget _buildStack(BuildContext context, BoxConstraints constraints) {
    final Animation<RelativeRect> animation = _getPanelAnimation(constraints);
    final ThemeData theme = Theme.of(context);
    return new Container(
      color: theme.primaryColor,
      child: new Stack(
        children: <Widget>[
          Positioned.fill(
            child: Image.asset(
              "assets/images/sample/bg.jpg",
              fit: BoxFit.fitWidth,
              alignment: Alignment.bottomLeft,
            ),
          ),
          new Center(
            child: CustomScrollView(
              slivers: <Widget>[
                _buildTopBar(context),
                _buildSectionHeader(context, 'おすすめ'),
                RecommendVideosSection(
                  key: Key('おすすめ'),
                  tapHandler: ((feature) {
                      _controller.fling(velocity: _isPanelVisible ? -1.0 : 1.0);
                    }
                  ),
                ),
                _buildSectionHeader(context, 'フォローしている芸人'),
                RecommendVideosSection(
                  key: Key('フォローしている芸人'),
                  tapHandler: ((feature) => {

                  }),
                ),
              ],
            ),
            ),            
          ],
      ),
    );
hmmo2u0o

hmmo2u0o1#

可以设置对齐值:

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      body: Stack(
        children: [
          Positioned.fill(
            child: Background(controller: controller),
          ),
          CustomScrollView(
            controller: controller,
            slivers: [
              SliverList(
                delegate: SliverChildListDelegate(
                  List.generate(
                    100,
                    (index) {
                      return Card(
                        margin: const EdgeInsets.all(20),
                        child: Padding(
                          padding: const EdgeInsets.all(38.0),
                          child: Text('Index $index'),
                        ),
                      );
                    },
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class Background extends StatefulWidget {
  const Background({
    super.key,
    required this.controller,
  });

  final ScrollController controller;
  @override
  State<Background> createState() => _BackgroundState();
}

class _BackgroundState extends State<Background> {
  bool isReady = false;

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        isReady = true;
      });
    });
    widget.controller.addListener(_listener);
    super.initState();
  }

  void _listener() {
    setState(() {});
  }

  @override
  void dispose() {
    widget.controller.removeListener(_listener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Image(
      image: const NetworkImage(
          'https://background-tiles.com/overview/mixed-colors/patterns/large/1148.png'),
      repeat: ImageRepeat.repeatY,
      alignment: Alignment(
        0,
        !isReady
            ? 0
            : -widget.controller.offset /
                MediaQuery.of(context).size.height *
                3,
      ),
    );
  }
}

相关问题