Flutter Scrollable Positioned List适配RTL方向滚动异常求助

问题描述 #

使用scrollable_positioned_list包通过索引切换水平滚动元素时，LTR（从左到右）模式下滚动过渡正常，但切换为RTL（从右到左）模式后，滚动位置出现异常，目标元素无法正确对齐到预期位置。

LTR效果：

RTL效果：

问题代码 #

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int currentIndex = 0;
  TextDirection textDirection = TextDirection.ltr;

  late final ItemScrollController itemScrollController;

  @override
  void initState() {
    itemScrollController = ItemScrollController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: textDirection,
      child: Scaffold(
        appBar: AppBar(title: const Text('Scrollable positioned list')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 100,
              child: ScrollablePositionedList.separated(
                itemCount: 10,
                scrollDirection: Axis.horizontal,
                itemScrollController: itemScrollController,
                padding: const EdgeInsets.symmetric(horizontal: 16),
                separatorBuilder: (context, index) => const SizedBox(width: 10),
                itemBuilder: (context, index) => Container(
                  width: 100,
                  height: 50,
                  alignment: AlignmentDirectional.center,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    border: currentIndex == index ? Border.all(color: Colors.black, width: 4) : null,
                  ),
                  child:
                      Text(index.toString(), style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w800)),
                ),
              ),
            ),
            const SizedBox(height: 40),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  if (textDirection == TextDirection.ltr) {
                    textDirection = TextDirection.rtl;
                  } else {
                    textDirection = TextDirection.ltr;
                  }
                });
              },
              child: Text(textDirection.toString()),
            )
          ],
        ),
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            FloatingActionButton(
              onPressed: () {
                setState(() {
                  if (currentIndex != 0) {
                    currentIndex--;
                    itemScrollController.scrollTo(index: currentIndex, duration: const Duration(microseconds: 500), alignment: 0.10);
                  }
                });
              },
              child: const Icon(Icons.arrow_back),
            ),
            FloatingActionButton(
              onPressed: () {
                setState(() {
                  if (currentIndex < 9) {
                    currentIndex++;
                    itemScrollController.scrollTo(index: currentIndex, duration: const Duration(microseconds: 500), alignment: 0.10);
                  }
                });
              },
              child: const Icon(Icons.arrow_forward),
            ),
          ],
        ),
      ),
    );
  }
}

解决方案 #

问题根源有两点：一是固定的alignment参数未适配RTL布局方向，二是过渡时长单位错误导致过渡效果几乎不可见。以下是修复步骤：

1. 修正过渡时长单位
   原代码中使用Duration(microseconds: 500)，仅0.5毫秒的过渡时间几乎无法察觉，改为Duration(milliseconds: 500)实现0.5秒的平滑过渡。

2. 根据文本方向动态调整alignment
   在LTR模式下，alignment: 0.1表示目标元素距离视口左边缘10%的位置；但RTL模式下布局方向反转，需将alignment改为0.9，让目标元素距离视口右边缘10%，保持视觉上的一致对齐效果。

3. 切换方向后重新定位元素
   切换文本方向后，列表布局会反转，需重新调用scrollTo将当前选中元素定位到正确位置。

修复后的完整代码 #

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int currentIndex = 0;
  TextDirection textDirection = TextDirection.ltr;

  late final ItemScrollController itemScrollController;

  @override
  void initState() {
    itemScrollController = ItemScrollController();
    super.initState();
  }

  // 计算当前方向对应的对齐值
  double get _alignment => textDirection == TextDirection.ltr ? 0.1 : 0.9;

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: textDirection,
      child: Scaffold(
        appBar: AppBar(title: const Text('Scrollable positioned list')),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 100,
              child: ScrollablePositionedList.separated(
                itemCount: 10,
                scrollDirection: Axis.horizontal,
                itemScrollController: itemScrollController,
                padding: const EdgeInsets.symmetric(horizontal: 16),
                separatorBuilder: (context, index) => const SizedBox(width: 10),
                itemBuilder: (context, index) => Container(
                  width: 100,
                  height: 50,
                  alignment: AlignmentDirectional.center,
                  decoration: BoxDecoration(
                    color: Colors.red,
                    border: currentIndex == index ? Border.all(color: Colors.black, width: 4) : null,
                  ),
                  child: Text(index.toString(), style: const TextStyle(color: Colors.white, fontWeight: FontWeight.w800)),
                ),
              ),
            ),
            const SizedBox(height: 40),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  textDirection = textDirection == TextDirection.ltr ? TextDirection.rtl : TextDirection.ltr;
                });
                // 切换方向后重新定位当前元素
                itemScrollController.scrollTo(
                  index: currentIndex,
                  duration: const Duration(milliseconds: 500),
                  alignment: _alignment,
                );
              },
              child: Text(textDirection.toString()),
            )
          ],
        ),
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            FloatingActionButton(
              onPressed: () {
                if (currentIndex != 0) {
                  setState(() => currentIndex--);
                  itemScrollController.scrollTo(
                    index: currentIndex,
                    duration: const Duration(milliseconds: 500),
                    alignment: _alignment,
                  );
                }
              },
              child: const Icon(Icons.arrow_back),
            ),
            FloatingActionButton(
              onPressed: () {
                if (currentIndex < 9) {
                  setState(() => currentIndex++);
                  itemScrollController.scrollTo(
                    index: currentIndex,
                    duration: const Duration(milliseconds: 500),
                    alignment: _alignment,
                  );
                }
              },
              child: const Icon(Icons.arrow_forward),
            ),
          ],
        ),
      ),
    );
  }
}

额外说明 #

如果希望更灵活的对齐策略，可以使用alignmentPolicy参数，设置为ScrollPositionAlignmentPolicy.keepVisibleEdges，这样列表会自动保持目标元素在视口中可见，无需手动计算alignment值：

itemScrollController.scrollTo(
  index: currentIndex,
  duration: const Duration(milliseconds: 500),
  alignmentPolicy: ScrollPositionAlignmentPolicy.keepVisibleEdges,
);

内容的提问来源于stack exchange，提问作者Mohammed Helewa