首页 > 解决方案 > 使用光刻的 2D 可滚动列表/平移功能?

问题描述

我想知道我们是否可以使用光刻创建 2D 可滚动列表?我尝试了嵌套的 RecyclerCollectionComponents 但它使列单独滚动,而不是我想要的平移功能。我也试过 GridRecyclerConfiguration 但它只能垂直滚动。我还想控制每列中的项目数和每个项目的高度。任何有关如何实现这一目标的指针将不胜感激。

我尝试了什么:

 final Component component =
                RecyclerCollectionComponent.create(context)
                        .disablePTR(true)
                        .section(ListSection.create(new SectionContext(context)).build())
                        .recyclerConfiguration(new ListRecyclerConfiguration(
                                LinearLayoutManager.HORIZONTAL, false ))
                                .build();

        return LithoView.create(context, component);

RecyclerView 组件

@LayoutSpec
public class RecyclerViewSpec {

    @OnCreateLayout
    static Component onCreateLayout(
            final ComponentContext c) {
        return RecyclerCollectionComponent.create(c)
                .section(ListSection.create(new SectionContext(c)).build())
                .build();
    }
}

上述 RecyclerView 的部分,其中包含嵌套的 RecyclerViews

@GroupSectionSpec
public class ListSectionSpec {

    private static List<Integer> generateData(int count) {
        final List<Integer> data = new ArrayList<>(count);
        for (int i = 0; i < count; i++) {
            data.add(i);
        }
        return data;
    }

    @OnEvent(RenderEvent.class)
    static RenderInfo onRender(final SectionContext c, @FromEvent Integer model) {
        return ComponentRenderInfo.create()
                .component(
                        ListItem.create(c)
                                .color(model % 2 == 0 ? Color.WHITE : Color.LTGRAY)
                                .title(model + ". Hello, world!")
                                .subtitle("Litho tutorial")
                                .build())
                .build();
    }

    @OnCreateChildren
    static Children onCreateChildren(final SectionContext c) {
        Children.Builder builder = Children.create();

        for (int i = 0; i < 32; i++) {
            builder.child(
                    SingleComponentSection.create(c)
                            .key(String.valueOf(i))
                            .component(RecyclerCollectionComponent.create(c)
                                    .disablePTR(true)
                                    .section(
                                            DataDiffSection.<Integer>create(c)
                                                    .data(generateData(32))
                                                    .renderEventHandler(ListSection.onRender(c))
                                                    .build())
                                    .canMeasureRecycler(true)));
        }

        return builder.build();
    }
}

单个列表项

@LayoutSpec
public class ListItemSpec {

    @OnCreateLayout
    static Component onCreateLayout(
            ComponentContext c,
            @Prop int color,
            @Prop String title,
            @Prop String subtitle) {

        return Column.create(c)
                .paddingDip(ALL, 16)
                .backgroundColor(color)
                .child(
                        Text.create(c)
                                .text(title)
                                .textSizeSp(40))
                .child(
                        Text.create(c)
                                .text(subtitle)
                                .textSizeSp(20))
                .build();
    }
}

这将创建一个水平滚动的列表,而各个列垂直滚动。我想要一个可以向任何方向平移的表面。

标签: androidlitho

解决方案


如果您能弄清楚如何在标准 android 中执行此操作,那么您可以使用相同的原理使其在 Litho 中工作(例如,使用与标准 android 中相同的 LayoutManager)。AFAIK,虽然这在标准 android 中并不容易做到。


推荐阅读