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

android:fix mix use layoutConfig and flexConfig

Browse Source
This commit is contained in:
pengfei.zhou 2020-04-13 14:30:14 +08:00 committed by osborn
parent 5a8a855f89
commit 7a2bffdb64
8 changed files with 205 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
doric-android/doric/src/main/java/pub/doric/shader/ImageNode.java
View File

@ -235,6 +235,7 @@ public class ImageNode extends ViewNode<ImageView> {
if (node != null) { if (node != null) {
node.dirty(); node.dirty();
} }
mView.requestLayout();
} }
} }
}); });

2
doric-android/doric/src/main/java/pub/doric/shader/ViewNode.java
View File

@ -71,7 +71,7 @@ public abstract class ViewNode<T extends View> extends DoricContextHolder {
String mId; String mId;
protected ViewGroup.LayoutParams mLayoutParams; protected ViewGroup.LayoutParams mLayoutParams;
private String mType; private String mType;
private JSObject mFlexConfig; protected JSObject mFlexConfig;
public JSObject getFlexConfig() { public JSObject getFlexConfig() {
return mFlexConfig; return mFlexConfig;

101
doric-android/doric/src/main/java/pub/doric/shader/flex/FlexNode.java
View File

@ -28,6 +28,7 @@ import com.facebook.yoga.YogaJustify;
import com.facebook.yoga.YogaNode; import com.facebook.yoga.YogaNode;
import com.facebook.yoga.YogaOverflow; import com.facebook.yoga.YogaOverflow;
import com.facebook.yoga.YogaPositionType; import com.facebook.yoga.YogaPositionType;
import com.facebook.yoga.YogaUnit;
import com.facebook.yoga.YogaWrap; import com.facebook.yoga.YogaWrap;
import com.facebook.yoga.android.YogaLayout; import com.facebook.yoga.android.YogaLayout;
import com.github.pengfeizhou.jscore.JSObject; import com.github.pengfeizhou.jscore.JSObject;
@ -59,56 +60,111 @@ public class FlexNode extends GroupNode<YogaLayout> {
@Override @Override
protected YogaLayout build() { protected YogaLayout build() {
YogaLayout yogaLayout = new YogaLayout(getContext()) { return new YogaLayout(getContext()) {
@Override @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
for (int i = 0; i < getChildCount(); i++) { for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i); View child = getChildAt(i);
ViewNode childNode = (ViewNode) child.getTag(R.id.doric_node); ViewNode childNode = (ViewNode) child.getTag(R.id.doric_node);
if (childNode != null && childNode.getFlexConfig() == null) { if (childNode != null) {
ViewGroup.LayoutParams layoutParams = child.getLayoutParams(); ViewGroup.LayoutParams layoutParams = child.getLayoutParams();
int childWidthMeasureSpec; int childWidthMeasureSpec;
int childHeightMeasureSpec; int childHeightMeasureSpec;
if (layoutParams.width == ViewGroup.LayoutParams.MATCH_PARENT) { if (layoutParams.width == ViewGroup.LayoutParams.MATCH_PARENT) {
childWidthMeasureSpec = View.MeasureSpec.makeMeasureSpec( childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
0, getMeasuredWidth(),
View.MeasureSpec.AT_MOST); MeasureSpec.AT_MOST);
} else if (layoutParams.width == ViewGroup.LayoutParams.WRAP_CONTENT) { } else if (layoutParams.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
childWidthMeasureSpec = View.MeasureSpec.makeMeasureSpec( childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
0, getMeasuredHeight(),
View.MeasureSpec.UNSPECIFIED); MeasureSpec.UNSPECIFIED);
} else { } else {
childWidthMeasureSpec = View.MeasureSpec.makeMeasureSpec( childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(
layoutParams.width, layoutParams.width,
View.MeasureSpec.EXACTLY); MeasureSpec.EXACTLY);
} }
if (layoutParams.height == ViewGroup.LayoutParams.MATCH_PARENT) { if (layoutParams.height == ViewGroup.LayoutParams.MATCH_PARENT) {
childHeightMeasureSpec = View.MeasureSpec.makeMeasureSpec( childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(
0, 0,
View.MeasureSpec.AT_MOST); MeasureSpec.AT_MOST);
} else if (layoutParams.height == ViewGroup.LayoutParams.WRAP_CONTENT) { } else if (layoutParams.height == ViewGroup.LayoutParams.WRAP_CONTENT) {
childHeightMeasureSpec = View.MeasureSpec.makeMeasureSpec( childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(
0, 0,
View.MeasureSpec.UNSPECIFIED); MeasureSpec.UNSPECIFIED);
} else { } else {
childHeightMeasureSpec = View.MeasureSpec.makeMeasureSpec( childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(
layoutParams.height, layoutParams.height,
View.MeasureSpec.EXACTLY); MeasureSpec.EXACTLY);
} }
child.measure(childWidthMeasureSpec, childHeightMeasureSpec); child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
if (layoutParams.width != ViewGroup.LayoutParams.MATCH_PARENT) { YogaNode node = getYogaNodeForView(child);
getYogaNodeForView(child).setWidth(childNode.getView().getMeasuredWidth()); if (node != null) {
} JSObject flexConfig = childNode.getFlexConfig();
if (layoutParams.height != ViewGroup.LayoutParams.MATCH_PARENT) { YogaUnit widthUnit = YogaUnit.AUTO;
getYogaNodeForView(child).setHeight(childNode.getView().getMeasuredHeight()); YogaUnit heightUnit = YogaUnit.AUTO;
if (flexConfig != null) {
JSValue widthValue = flexConfig.getProperty("width");
if (widthValue.isNumber()) {
widthUnit = YogaUnit.POINT;
} else if (widthValue.isObject()) {
JSValue typeValue = widthValue.asObject().getProperty("type");
if (typeValue.isNumber()) {
widthUnit = YogaUnit.fromInt(typeValue.asNumber().toInt());
}
}
JSValue heightValue = flexConfig.getProperty("height");
if (heightValue.isNumber()) {
heightUnit = YogaUnit.POINT;
} else if (heightValue.isObject()) {
JSValue typeValue = heightValue.asObject().getProperty("type");
if (typeValue.isNumber()) {
heightUnit = YogaUnit.fromInt(typeValue.asNumber().toInt());
}
}
}
if (widthUnit == YogaUnit.AUTO) {
node.setWidth(childNode.getView().getMeasuredWidth());
}
if (heightUnit == YogaUnit.AUTO) {
node.setHeight(childNode.getView().getMeasuredHeight());
}
} }
} }
} }
YogaUnit widthUnit = YogaUnit.AUTO;
YogaUnit heightUnit = YogaUnit.AUTO;
JSObject flexConfig = getFlexConfig();
if (flexConfig != null) {
JSValue widthValue = flexConfig.getProperty("width");
if (widthValue.isNumber()) {
widthUnit = YogaUnit.POINT;
} else if (widthValue.isObject()) {
JSValue typeValue = widthValue.asObject().getProperty("type");
if (typeValue.isNumber()) {
widthUnit = YogaUnit.fromInt(typeValue.asNumber().toInt());
}
}
JSValue heightValue = flexConfig.getProperty("height");
if (heightValue.isNumber()) {
heightUnit = YogaUnit.POINT;
} else if (heightValue.isObject()) {
JSValue typeValue = heightValue.asObject().getProperty("type");
if (typeValue.isNumber()) {
heightUnit = YogaUnit.fromInt(typeValue.asNumber().toInt());
}
}
}
// Because in onLayout yogaNode's width and height would be set to exactly.
if (widthUnit == YogaUnit.AUTO) {
getYogaNode().setWidthAuto();
}
if (heightUnit == YogaUnit.AUTO) {
getYogaNode().setHeightAuto();
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec); super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} }
}; };
return yogaLayout;
} }
@Override @Override
@ -126,6 +182,7 @@ public class FlexNode extends GroupNode<YogaLayout> {
protected void blend(YogaLayout view, String name, JSValue prop) { protected void blend(YogaLayout view, String name, JSValue prop) {
if ("flexConfig".equals(name)) { if ("flexConfig".equals(name)) {
blendSubFlexConfig(mView.getYogaNode(), prop.asObject()); blendSubFlexConfig(mView.getYogaNode(), prop.asObject());
this.mFlexConfig = prop.asObject();
} else { } else {
super.blend(view, name, prop); super.blend(view, name, prop);
} }

190
doric-demo/src/FlexDemo.ts
View File

@ -40,92 +40,122 @@ export const ICON_BUBBLE_WHITE_ARROW_UP = "data:image/png;base64,iVBORw0KGgoAAAA
@Entry @Entry
class LayoutDemo extends Panel { class LayoutDemo extends Panel {
build(root: Group) { build(root: Group) {
flexlayout( scroller(
[ flexlayout(
// image({ [
// imageBase64: ICON_GENDER_MAN, image({
// scaleType: ScaleType.ScaleAspectFit, imageBase64: ICON_GENDER_MAN,
// // flexConfig: { scaleType: ScaleType.ScaleAspectFit,
// // width: FlexTypedValue.Auto, // flexConfig: {
// // height: FlexTypedValue.Auto, // width: FlexTypedValue.Auto,
// // }, // height: FlexTypedValue.Auto,
// backgroundColor: Color.GRAY, // },
// layoutConfig: { backgroundColor: Color.GRAY,
// widthSpec: LayoutSpec.FIT, layoutConfig: {
// heightSpec: LayoutSpec.JUST, widthSpec: LayoutSpec.FIT,
// alignment: Gravity.Center, heightSpec: LayoutSpec.JUST,
// }, alignment: Gravity.Center,
// height: 30, },
// }), height: 30,
// text({ }),
// text: "1234343434343456", text({
// backgroundColor: Color.RED, text: "1234343434343456",
// flexConfig: { backgroundColor: Color.RED,
// width: FlexTypedValue.Auto, flexConfig: {
// height: FlexTypedValue.Auto, width: FlexTypedValue.Auto,
// }, height: 100,
// }), },
text({ }),
text: "123456", vlayout(
backgroundColor: Color.RED, [
flexConfig: { text({
text: "11111"
}, }),
}), text({
image({ text: "22222"
imageBase64: ICON_GENDER_MAN, }),
scaleType: ScaleType.ScaleAspectFit, text({
layoutConfig: { text: "33333"
widthSpec: LayoutSpec.FIT, }),
heightSpec: LayoutSpec.JUST, ],
}, {
height: 20, backgroundColor: Color.GRAY,
backgroundColor: Color.GRAY, flexConfig: {
}), alignSelf: Align.CENTER,
image({ }
imageBase64: ICON_GENDER_MAN, }),
scaleType: ScaleType.ScaleAspectFit, text({
flexConfig: { text: "123456sdfdsfdsfdsfdsfsdfsdfsdfsdfdsfs",
width: 80, backgroundColor: Color.RED,
}, }),
backgroundColor: Color.GRAY, image({
}), imageBase64: ICON_GENDER_MAN,
image({ scaleType: ScaleType.ScaleAspectFit,
imageBase64: ICON_GENDER_MAN, layoutConfig: {
scaleType: ScaleType.ScaleAspectFit, widthSpec: LayoutSpec.FIT,
flexConfig: { heightSpec: LayoutSpec.JUST,
},
height: 20, height: 20,
}, backgroundColor: Color.GRAY,
backgroundColor: Color.RED, }),
}), image({
image({ imageBase64: ICON_GENDER_MAN,
imageBase64: ICON_GENDER_MAN, scaleType: ScaleType.ScaleAspectFit,
scaleType: ScaleType.ScaleAspectFit, flexConfig: {
width: 80,
},
backgroundColor: Color.GRAY,
}),
flexlayout(
[
image({
imageBase64: ICON_GENDER_MAN,
scaleType: ScaleType.ScaleAspectFit,
backgroundColor: Color.BLUE,
}),
image({
imageBase64: ICON_GENDER_MAN,
scaleType: ScaleType.ScaleAspectFit,
backgroundColor: Color.BLUE,
}),
],
{
flexConfig: {
width: 100,
height: 100,
},
backgroundColor: Color.YELLOW,
}),
image({
imageBase64: ICON_GENDER_MAN,
scaleType: ScaleType.ScaleAspectFit,
flexConfig: {
height: 20,
},
backgroundColor: Color.GRAY,
}),
],
{
flexConfig: { flexConfig: {
height: 20, flexDirection: FlexDirection.ROW,
}, },
backgroundColor: Color.GRAY, backgroundColor: Color.GRAY.alpha(0.1),
}), }
], ),
{ {
flexConfig: { layoutConfig: layoutConfig().most()
width: 300,
height: 300,
flexDirection: FlexDirection.ROW,
},
backgroundColor: Color.GRAY.alpha(0.1),
} }
).in(root) ).in(root)
image({ // image({
imageBase64: ICON_GENDER_MAN, // imageBase64: ICON_GENDER_MAN,
backgroundColor: Color.GRAY, // backgroundColor: Color.GRAY,
layoutConfig: { // layoutConfig: {
widthSpec: LayoutSpec.FIT, // widthSpec: LayoutSpec.FIT,
heightSpec: LayoutSpec.JUST, // heightSpec: LayoutSpec.JUST,
alignment: Gravity.Center, // alignment: Gravity.Center,
}, // },
height: 30, // height: 30,
}).in(root) // }).in(root)
} }
} }

1
doric-js/index.d.ts vendored
View File

@ -1333,6 +1333,7 @@ declare module 'doric/lib/src/util/flexbox' {
export class FlexTypedValue implements Modeling { export class FlexTypedValue implements Modeling {
type: ValueType; type: ValueType;
value: number; value: number;
constructor(type: ValueType);
static Auto: FlexTypedValue; static Auto: FlexTypedValue;
static percent(v: number): FlexTypedValue; static percent(v: number): FlexTypedValue;
static point(v: number): FlexTypedValue; static point(v: number): FlexTypedValue;

1
doric-js/lib/src/util/flexbox.d.ts vendored
View File

@ -8,6 +8,7 @@ declare enum ValueType {
export declare class FlexTypedValue implements Modeling { export declare class FlexTypedValue implements Modeling {
type: ValueType; type: ValueType;
value: number; value: number;
constructor(type: ValueType);
static Auto: FlexTypedValue; static Auto: FlexTypedValue;
static percent(v: number): FlexTypedValue; static percent(v: number): FlexTypedValue;
static point(v: number): FlexTypedValue; static point(v: number): FlexTypedValue;

12
doric-js/lib/src/util/flexbox.js
View File

@ -6,19 +6,17 @@ var ValueType;
ValueType[ValueType["Auto"] = 3] = "Auto"; ValueType[ValueType["Auto"] = 3] = "Auto";
})(ValueType || (ValueType = {})); })(ValueType || (ValueType = {}));
export class FlexTypedValue { export class FlexTypedValue {
constructor() { constructor(type) {
this.type = ValueType.Auto;
this.value = 0; this.value = 0;
this.type = type;
} }
static percent(v) { static percent(v) {
const ret = new FlexTypedValue; const ret = new FlexTypedValue(ValueType.Percent);
ret.type = ValueType.Percent;
ret.value = v; ret.value = v;
return ret; return ret;
} }
static point(v) { static point(v) {
const ret = new FlexTypedValue; const ret = new FlexTypedValue(ValueType.Point);
ret.type = ValueType.Point;
ret.value = v; ret.value = v;
return ret; return ret;
} }
@ -29,7 +27,7 @@ export class FlexTypedValue {
}; };
} }
} }
FlexTypedValue.Auto = new FlexTypedValue; FlexTypedValue.Auto = new FlexTypedValue(ValueType.Auto);
export var FlexDirection; export var FlexDirection;
(function (FlexDirection) { (function (FlexDirection) {
FlexDirection[FlexDirection["COLUMN"] = 0] = "COLUMN"; FlexDirection[FlexDirection["COLUMN"] = 0] = "COLUMN";

13
doric-js/src/util/flexbox.ts
View File

@ -24,21 +24,22 @@ enum ValueType {
export class FlexTypedValue implements Modeling { export class FlexTypedValue implements Modeling {
type = ValueType.Auto type: ValueType
value = 0 value = 0
constructor(type: ValueType) {
this.type = type
}
static Auto = new FlexTypedValue static Auto = new FlexTypedValue(ValueType.Auto)
static percent(v: number) { static percent(v: number) {
const ret = new FlexTypedValue const ret = new FlexTypedValue(ValueType.Percent)
ret.type = ValueType.Percent
ret.value = v ret.value = v
return ret return ret
} }
static point(v: number) { static point(v: number) {
const ret = new FlexTypedValue const ret = new FlexTypedValue(ValueType.Point)
ret.type = ValueType.Point
ret.value = v ret.value = v
return ret return ret
} }