iOS: Fix some layout cases
This commit is contained in:
pengfei.zhou
osborn
parent
2fa85ecd6d
commit
1aaa3aa3f0
@ -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
292
doric-demo/src/LayoutTestDemo.tsx
Normal 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>;
|
||||
}
|
||||
}
|
||||
@ -92,6 +92,8 @@ - (DoricLayout *)doricLayout {
|
||||
@end
|
||||
|
||||
@interface DoricLayout ()
|
||||
@property(nonatomic,assign) BOOL reassignWidth;
|
||||
@property(nonatomic,assign) BOOL reassignHeight;
|
||||
@end
|
||||
|
||||
@implementation DoricLayout
|
||||
@ -103,6 +105,8 @@ - (instancetype)init {
|
||||
_maxHeight = CGFLOAT_MAX;
|
||||
_minWidth = CGFLOAT_MIN;
|
||||
_minHeight = CGFLOAT_MIN;
|
||||
_reassignWidth = NO;
|
||||
_reassignHeight = NO;
|
||||
}
|
||||
return self;
|
||||
}
|
||||
@ -192,6 +196,8 @@ - (BOOL)restrainSize {
|
||||
}
|
||||
|
||||
- (void)measureContent:(CGSize)targetSize {
|
||||
self.reassignWidth = NO;
|
||||
self.reassignHeight = NO;
|
||||
switch (self.layoutType) {
|
||||
case DoricStack: {
|
||||
[self measureStackContent:targetSize];
|
||||
@ -218,6 +224,23 @@ - (void)measureContent:(CGSize)targetSize {
|
||||
if (self.view.superview.doricLayout.heightSpec == DoricLayoutFit && self.heightSpec == DoricLayoutMost) {
|
||||
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 {
|
||||
@ -401,7 +424,7 @@ - (void)measureVLayoutContent:(CGSize)targetSize {
|
||||
contentHeight -= self.spacing;
|
||||
}
|
||||
|
||||
if (contentWeight > 0) {
|
||||
if (contentWeight > 0 && self.heightSpec != DoricLayoutFit) {
|
||||
CGFloat remaining = targetSize.height - contentHeight;
|
||||
contentWidth = 0;
|
||||
contentHeight = 0;
|
||||
@ -459,7 +482,7 @@ - (void)measureHLayoutContent:(CGSize)targetSize {
|
||||
contentWidth -= self.spacing;
|
||||
}
|
||||
|
||||
if (contentWeight > 0) {
|
||||
if (contentWeight > 0 && self.widthSpec != DoricLayoutFit) {
|
||||
CGFloat remaining = targetSize.width - contentWidth;
|
||||
contentWidth = 0;
|
||||
contentHeight = 0;
|
||||
@ -504,10 +527,10 @@ - (void)layoutStack {
|
||||
if (layout.disabled) {
|
||||
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;
|
||||
}
|
||||
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 layout];
|
||||
@ -563,7 +586,7 @@ - (void)layoutVLayout {
|
||||
if (layout.disabled) {
|
||||
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 layout];
|
||||
@ -606,7 +629,7 @@ - (void)layoutHLayout {
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user