tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

iOS: Fix some layout cases

Browse Source
This commit is contained in:
pengfei.zhou
2022-08-04 19:46:25 +08:00
committed by osborn
parent 2fa85ecd6d
commit 1aaa3aa3f0
3 changed files with 321 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

311
doric-demo/src/LayoutTestDemo.ts
View File

@@ -1,311 +0,0 @@
import { Panel, Group, vlayout, LayoutSpec, text, Color, gravity, stack, layoutConfig, scroller, Gravity, View, hlayout } from "doric";
function grid(title: string, view: View) {
return vlayout(
[
text({
text: title,
backgroundColor: Color.parse("#3498db"),
textColor: Color.WHITE,
textAlignment: Gravity.CenterX,
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.JUST,
},
height: 30
}),
stack(
[
view
],
{
layoutConfig: layoutConfig().just(),
width: 300,
height: 300,
backgroundColor: Color.parse("#ecf0f1"),
})
])
}
function content() {
return [
text({
text: "Content",
textColor: Color.WHITE,
backgroundColor: Color.parse("#34495e"),
}),
stack(
[],
{
layoutConfig: {
widthSpec: LayoutSpec.JUST,
heightSpec: LayoutSpec.JUST,
margin: {
left: 10,
right: 10,
top: 10,
bottom: 10
}
},
width: 100,
height: 100,
backgroundColor: Color.parse("#34495e")
})
]
}
function case1() {
return stack(
[
stack(
[
...content(),
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c")
})
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
backgroundColor: Color.parse("#9b59b6")
}
)
}
function case2() {
return stack(
[
stack(
[],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c")
}),
...content(),
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
backgroundColor: Color.parse("#9b59b6")
}
)
}
function case3() {
return stack(
[
case1(),
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
backgroundColor: Color.parse("#2ecc71")
}
)
}
function case4() {
return stack(
[
case2(),
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
backgroundColor: Color.parse("#2ecc71")
}
)
}
function case5() {
return stack(
[
case3(),
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
backgroundColor: Color.parse("#3498db")
}
)
}
function case6() {
return stack(
[
case3(),
],
{
layoutConfig: layoutConfig().fit(),
padding: {
left: 10, right: 10,
top: 10, bottom: 10
},
backgroundColor: Color.parse("#3498db")
}
)
}
@Entry
class LayoutTest extends Panel {
build(root: Group) {
scroller(
vlayout(
[
grid(
"VLayout fit -> most -> just",
vlayout(
[
stack(
[
...content(),
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
],
{
layoutConfig: layoutConfig().fit(),
backgroundColor: Color.parse("#9b59b6"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
),
grid(
"VLayout fit -> most, just",
vlayout(
[
stack(
[],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
}),
...content(),
],
{
layoutConfig: layoutConfig().fit(),
backgroundColor: Color.parse("#9b59b6"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
),
grid(
"HLayout fit -> most -> just",
hlayout(
[
stack(
[
...content(),
],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
],
{
layoutConfig: layoutConfig().fit(),
backgroundColor: Color.parse("#9b59b6"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
),
grid(
"HLayout fit -> most, just",
hlayout(
[
stack(
[],
{
layoutConfig: layoutConfig().most(),
backgroundColor: Color.parse("#1abc9c"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
}),
...content(),
],
{
layoutConfig: layoutConfig().fit(),
backgroundColor: Color.parse("#9b59b6"),
padding: {
left: 10, right: 10,
top: 10, bottom: 10,
}
})
),
grid(
"Stack fit -> most -> just",
case1(),
),
grid(
"Stack fit -> most, just",
case2(),
),
grid(
"Stack fit -> fit -> most -> just",
case3(),
),
grid(
"Stack fit -> fit -> most, just",
case4(),
),
grid(
"Stack fit -> fit -> fit -> most -> just",
case5(),
),
grid(
"Stack fit -> fit -> fit -> most, just",
case6(),
),
],
{
layoutConfig: {
widthSpec: LayoutSpec.MOST,
heightSpec: LayoutSpec.FIT,
},
gravity: Gravity.CenterX,
space: 20,
}),
{
layoutConfig: layoutConfig().most(),
}).in(root)
}
}

292
doric-demo/src/LayoutTestDemo.tsx Normal file
View File

@@ -0,0 +1,292 @@
import {
jsx,
Panel,
Group,
Color,
layoutConfig,
Gravity,
Scroller,
VLayout,
Text,
Stack,
HLayout,
} from "doric";
function Grid(props: { title: string; innerElement: JSX.Element }) {
return (
<VLayout>
<Text
text={props.title}
backgroundColor={Color.parse("#3498db")}
textColor={Color.WHITE}
textAlignment={Gravity.CenterX}
layoutConfig={layoutConfig().mostWidth().justHeight()}
height={30}
/>
<Stack
layoutConfig={layoutConfig().just()}
width={300}
height={300}
backgroundColor={Color.parse("#ecf0f1")}
>
{props.innerElement}
</Stack>
</VLayout>
);
}
function Content() {
return (
<>
<Text textColor={Color.WHITE} backgroundColor={Color.parse("#34495e")}>
Content
</Text>
<Stack
layoutConfig={layoutConfig().just().configMargin({
left: 10,
right: 10,
top: 10,
bottom: 10,
})}
width={100}
height={100}
backgroundColor={Color.parse("#34495e")}
/>
</>
);
}
function Case1() {
return (
<Stack
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
backgroundColor={Color.parse("#9b59b6")}
>
<Stack
layoutConfig={layoutConfig().most()}
backgroundColor={Color.parse("#1abc9c")}
>
<Content />
</Stack>
</Stack>
);
}
function Case2() {
return (
<Stack
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
backgroundColor={Color.parse("#9b59b6")}
>
<Stack
layoutConfig={layoutConfig().most()}
backgroundColor={Color.parse("#1abc9c")}
></Stack>
<Content />
</Stack>
);
}
function Case3() {
return (
<Stack
backgroundColor={Color.parse("#2ecc71")}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
>
<Case1 />
</Stack>
);
}
function Case4() {
return (
<Stack
backgroundColor={Color.parse("#2ecc71")}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
>
<Case2 />
</Stack>
);
}
function Case5() {
return (
<Stack
backgroundColor={Color.parse("#3498db")}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
>
<Case3 />
</Stack>
);
}
function Case6() {
return (
<Stack
backgroundColor={Color.parse("#3498db")}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
>
<Case3 />
</Stack>
);
}
@Entry
class LayoutTest extends Panel {
build(root: Group) {
<Scroller parent={root} layoutConfig={layoutConfig().most()}>
<VLayout
layoutConfig={layoutConfig().mostWidth().fitHeight()}
gravity={Gravity.Center}
>
<Grid title="VLayout fit -> most -> just">
<VLayout
layoutConfig={layoutConfig().fit()}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
backgroundColor={Color.parse("#9b59b6")}
>
<Stack
layoutConfig={layoutConfig().most()}
backgroundColor={Color.parse("#1abc9c")}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
>
<Content></Content>
</Stack>
</VLayout>
</Grid>
<Grid title="VLayout fit -> most, just">
<VLayout
layoutConfig={layoutConfig().fit()}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
backgroundColor={Color.parse("#9b59b6")}
>
<Stack
layoutConfig={layoutConfig().most()}
backgroundColor={Color.parse("#1abc9c")}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
></Stack>
<Content></Content>
</VLayout>
</Grid>
<Grid title="HLayout fit -> most -> just">
<HLayout
layoutConfig={layoutConfig().fit()}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
backgroundColor={Color.parse("#9b59b6")}
>
<Stack
layoutConfig={layoutConfig().most()}
backgroundColor={Color.parse("#1abc9c")}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
>
<Content></Content>
</Stack>
</HLayout>
</Grid>
<Grid title="HLayout fit -> most, just">
<HLayout
layoutConfig={layoutConfig().fit()}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
backgroundColor={Color.parse("#9b59b6")}
>
<Stack
layoutConfig={layoutConfig().most()}
backgroundColor={Color.parse("#1abc9c")}
padding={{
left: 10,
right: 10,
top: 10,
bottom: 10,
}}
></Stack>
<Content></Content>
</HLayout>
</Grid>
<Grid title="Stack fit -> most -> just">
<Case1 />
</Grid>
<Grid title="Stack fit -> most, just">
<Case2 />
</Grid>
<Grid title="Stack fit -> fit -> most -> just">
<Case3 />
</Grid>
<Grid title="Stack fit -> fit -> most, just">
<Case4 />
</Grid>
<Grid title="Stack fit -> fit -> fit -> most -> just">
<Case5 />
</Grid>
<Grid title="Stack fit -> fit -> fit -> most, just">
<Case6 />
</Grid>
</VLayout>
</Scroller>;
}
}