具有重复图像作为装饰的水平可滚动容器答案

【问题标题】：Horizontal scrollable container with repeating image as decoration具有重复图像作为装饰的水平可滚动容器
【发布时间】：2021-12-15 09:15:38
【问题描述】：

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

基本上是带有重复背景的 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 随背景滚动，但从不重复。

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

【问题讨论】：

标签： flutter flutter-layout parallax flutter-listview decoration

【解决方案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,
            ),
          ),
        ]),
      ),)

【讨论】：

没有更改尝试所有重复选项。也不希望它在 Y 轴上重复，这就是我使用 repeatX 的原因
尝试用 Positioned.fill 包裹你的小部件
用 Positioned 包裹所有小部件？
是的！我编辑了答案，请检查一下。