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
Show Stats 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>;
}
}

35
doric-iOS/Pod/Classes/Shader/DoricLayouts.m
View File

@ -92,6 +92,8 @@ - (DoricLayout *)doricLayout {
@end @end
@interface DoricLayout () @interface DoricLayout ()
@property(nonatomic,assign) BOOL reassignWidth;
@property(nonatomic,assign) BOOL reassignHeight;
@end @end
@implementation DoricLayout @implementation DoricLayout
@ -103,6 +105,8 @@ - (instancetype)init {
_maxHeight = CGFLOAT_MAX; _maxHeight = CGFLOAT_MAX;
_minWidth = CGFLOAT_MIN; _minWidth = CGFLOAT_MIN;
_minHeight = CGFLOAT_MIN; _minHeight = CGFLOAT_MIN;
_reassignWidth = NO;
_reassignHeight = NO;
} }
return self; return self;
} }
@ -192,6 +196,8 @@ - (BOOL)restrainSize {
} }
- (void)measureContent:(CGSize)targetSize { - (void)measureContent:(CGSize)targetSize {
self.reassignWidth = NO;
self.reassignHeight = NO;
switch (self.layoutType) { switch (self.layoutType) {
case DoricStack: { case DoricStack: {
[self measureStackContent:targetSize]; [self measureStackContent:targetSize];
@ -218,6 +224,23 @@ - (void)measureContent:(CGSize)targetSize {
if (self.view.superview.doricLayout.heightSpec == DoricLayoutFit && self.heightSpec == DoricLayoutMost) { if (self.view.superview.doricLayout.heightSpec == DoricLayoutFit && self.heightSpec == DoricLayoutMost) {
self.measuredHeight = self.contentHeight + self.paddingTop + self.paddingBottom; self.measuredHeight = self.contentHeight + self.paddingTop + self.paddingBottom;
} }
if (self.view.superview.doricLayout.layoutType == DoricHLayout
&& self.view.superview.doricLayout.widthSpec == DoricLayoutFit
&& self.weight > 0
&& self.widthSpec == DoricLayoutJust
) {
self.measuredWidth = self.contentWidth + self.paddingLeft + self.paddingRight + self.width;
self.reassignWidth = YES;
}
if (self.view.superview.doricLayout.layoutType == DoricVLayout
&& self.view.superview.doricLayout.heightSpec == DoricLayoutFit
&& self.weight > 0
&& self.heightSpec == DoricLayoutJust
) {
self.measuredHeight = self.contentHeight + self.paddingTop + self.paddingBottom + self.height;
self.reassignHeight = YES;
}
} }
- (void)layout { - (void)layout {
@ -401,7 +424,7 @@ - (void)measureVLayoutContent:(CGSize)targetSize {
contentHeight -= self.spacing; contentHeight -= self.spacing;
} }
if (contentWeight > 0) { if (contentWeight > 0 && self.heightSpec != DoricLayoutFit) {
CGFloat remaining = targetSize.height - contentHeight; CGFloat remaining = targetSize.height - contentHeight;
contentWidth = 0; contentWidth = 0;
contentHeight = 0; contentHeight = 0;
@ -459,7 +482,7 @@ - (void)measureHLayoutContent:(CGSize)targetSize {
contentWidth -= self.spacing; contentWidth -= self.spacing;
} }
if (contentWeight > 0) { if (contentWeight > 0 && self.widthSpec != DoricLayoutFit) {
CGFloat remaining = targetSize.width - contentWidth; CGFloat remaining = targetSize.width - contentWidth;
contentWidth = 0; contentWidth = 0;
contentHeight = 0; contentHeight = 0;
@ -504,10 +527,10 @@ - (void)layoutStack {
if (layout.disabled) { if (layout.disabled) {
continue; continue;
} }
if (self.widthSpec == DoricLayoutFit && layout.widthSpec == DoricLayoutMost) { if ((self.widthSpec == DoricLayoutFit || self.reassignWidth) && layout.widthSpec == DoricLayoutMost) {
layout.measuredWidth = self.contentWidth - layout.marginLeft - layout.marginRight; layout.measuredWidth = self.contentWidth - layout.marginLeft - layout.marginRight;
} }
if (self.heightSpec == DoricLayoutFit && layout.heightSpec == DoricLayoutMost) { if ((self.heightSpec == DoricLayoutFit || self.reassignHeight) && layout.heightSpec == DoricLayoutMost) {
layout.measuredHeight = self.contentHeight - layout.marginTop - layout.marginBottom; layout.measuredHeight = self.contentHeight - layout.marginTop - layout.marginBottom;
} }
[layout layout]; [layout layout];
@ -563,7 +586,7 @@ - (void)layoutVLayout {
if (layout.disabled) { if (layout.disabled) {
continue; continue;
} }
if (self.widthSpec == DoricLayoutFit && layout.widthSpec == DoricLayoutMost) { if ((self.widthSpec == DoricLayoutFit || self.reassignWidth) && layout.widthSpec == DoricLayoutMost) {
layout.measuredWidth = self.contentWidth - layout.marginLeft - layout.marginRight; layout.measuredWidth = self.contentWidth - layout.marginLeft - layout.marginRight;
} }
[layout layout]; [layout layout];
@ -606,7 +629,7 @@ - (void)layoutHLayout {
continue; continue;
} }
if (self.heightSpec == DoricLayoutFit && layout.heightSpec == DoricLayoutMost) { if ((self.heightSpec == DoricLayoutFit || self.reassignHeight) && layout.heightSpec == DoricLayoutMost) {
layout.measuredHeight = self.contentHeight - layout.marginTop - layout.marginBottom; layout.measuredHeight = self.contentHeight - layout.marginTop - layout.marginBottom;
} }