Doric/doric-demo/src/ComplicatedDemo.ts

import { Panel, Group, vlayout, image, layoutConfig, ScaleType, refreshable, Color, pullable, stack, Image, Refreshable, TranslationAnimation, loge, log, list, listItem, text } from "doric";
import { title, icon_refresh, colors } from "./utils";

@Entry
class MyDemo extends Panel {
    build(root: Group) {
        let refreshed: Refreshable
        let headerImage: Image
        stack(
            [
                refreshed = refreshable({
                    onRefresh: () => {
                        refreshed.setRefreshing(context, false)
                    },
                    header: pullable(
                        stack([]).apply({
                            backgroundColor: Color.RED,
                            layoutConfig: layoutConfig().just(),
                            width: 100,
                            height: 30,
                        }),
                        {
                            startAnimation: () => {
                            },
                            stopAnimation: () => {
                            },
                            setPullingDistance: (distance: number) => {
                                headerImage.scaleX = headerImage.scaleY = (headerImage.height + distance * 2) / headerImage.height
                            },
                        }),
                    content: list({
                        itemCount: 20,
                        renderItem: (idx) => {
                            return listItem(text({
                                text: `Item :${idx}`,
                                layoutConfig: layoutConfig().just(),
                                width: root.width,
                                height: 50,
                                textColor: Color.WHITE,
                                backgroundColor: colors[idx % colors.length],
                            }))
                        },
                        layoutConfig: layoutConfig().most(),
                    }),
                    layoutConfig: layoutConfig().most(),
                }).also(v => {
                    v.top = 200
                }),

                headerImage = image({
                    imageUrl: "https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg",
                    layoutConfig: layoutConfig().just(),
                    width: root.width,
                    height: 200,
                    scaleType: ScaleType.ScaleAspectFill,
                }),
            ],
            {
                layoutConfig: layoutConfig().most()
            }
        ).in(root)
    }
}