flutter - 以重复图像作为装饰的水平可滚动容器

Question

我正在尝试创建一个水平列表视图，其背景会一直重复直到列表结束。

基本上是带有重复背景的 wrap_content 的回收站视图

这是我现在的代码：

class _MyHomePageState extends State<MyHomePage> {
  double _offsetY = 0.0;
  late ScrollController _scrollController;

  _scrollListener() {
    setState(() {
      _offsetY = _scrollController.offset;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/town_background.jpg'),
            fit: BoxFit.fitHeight,
            repeat: ImageRepeat.repeatX,
            alignment: FractionalOffset((_offsetY / 1000), 0),
          ),
        ),
        child: Flex(direction: Axis.horizontal, children: [
          Flexible(
            child: ListView.separated(
              controller: _scrollController,
              itemCount: 40,
              separatorBuilder: (_, __) => const Divider(
                indent: 30,
              ),
              itemBuilder: (_, index) => const Icon(Icons.person, size: 50),
              scrollDirection: Axis.horizontal,
            ),
          ),
        ]),
      ),
    );
  }
} 

Listview 随背景滚动，但从不重复。

*对齐偏移用于视差效果。

Answer 1

try:

    repeat: ImageRepeat.repeat,
or try :
    Positioned.fill(child:
     Container(
        width: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/town_background.jpg'),
            fit: BoxFit.fitHeight,
            repeat: ImageRepeat.repeatX,
            alignment: FractionalOffset((_offsetY / 1000), 0),
          ),
        ),
        child: Flex(direction: Axis.horizontal, children: [
          Flexible(
            child: ListView.separated(
              controller: _scrollController,
              itemCount: 40,
              separatorBuilder: (_, __) => const Divider(
                indent: 30,
              ),
              itemBuilder: (_, index) => const Icon(Icons.person, size: 50),
              scrollDirection: Axis.horizontal,
            ),
          ),
        ]),
      ),)