From e15ee4a4d5598c8fb717d96a0cc8c79c67fa13d3 Mon Sep 17 00:00:00 2001 From: answershuto Date: Thu, 12 May 2022 14:59:24 +0800 Subject: [PATCH 1/7] :bug: fix: Children of custom element need RenderFlowLayout nesting, otherwise the parent render layout will not be called when setting properties. --- kraken/lib/src/widget/element_to_widget_adaptor.dart | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/kraken/lib/src/widget/element_to_widget_adaptor.dart b/kraken/lib/src/widget/element_to_widget_adaptor.dart index 650e2bad76..a571eeb228 100644 --- a/kraken/lib/src/widget/element_to_widget_adaptor.dart +++ b/kraken/lib/src/widget/element_to_widget_adaptor.dart @@ -2,7 +2,9 @@ * Copyright (C) 2022-present The Kraken authors. All rights reserved. */ import 'package:flutter/widgets.dart'; +import 'package:kraken/css.dart'; import 'package:kraken/dom.dart' as dom; +import 'package:kraken/rendering.dart'; class KrakenElementToWidgetAdaptor extends RenderObjectWidget { final dom.Node _krakenNode; @@ -19,7 +21,13 @@ class KrakenElementToWidgetAdaptor extends RenderObjectWidget { @override RenderObject createRenderObject(BuildContext context) { - return _krakenNode.renderer!; + if (_krakenNode is dom.Element) { + RenderFlowLayout renderFlowLayout = RenderFlowLayout(renderStyle: CSSRenderStyle(target: _krakenNode as dom.Element)); + renderFlowLayout.insert(_krakenNode.renderer!); + return renderFlowLayout; + } else { + return _krakenNode.renderer!; + } } } From 1d96587cf9112bbd64d86e7ae62f6731eab7ae4d Mon Sep 17 00:00:00 2001 From: answershuto Date: Thu, 12 May 2022 15:00:03 +0800 Subject: [PATCH 2/7] :art: chore: add comment. --- kraken/lib/src/widget/element_to_widget_adaptor.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/kraken/lib/src/widget/element_to_widget_adaptor.dart b/kraken/lib/src/widget/element_to_widget_adaptor.dart index a571eeb228..f05bad9bc0 100644 --- a/kraken/lib/src/widget/element_to_widget_adaptor.dart +++ b/kraken/lib/src/widget/element_to_widget_adaptor.dart @@ -21,6 +21,8 @@ class KrakenElementToWidgetAdaptor extends RenderObjectWidget { @override RenderObject createRenderObject(BuildContext context) { + // Children of custom element need RenderFlowLayout nesting, + // otherwise the parent render layout will not be called when setting properties. if (_krakenNode is dom.Element) { RenderFlowLayout renderFlowLayout = RenderFlowLayout(renderStyle: CSSRenderStyle(target: _krakenNode as dom.Element)); renderFlowLayout.insert(_krakenNode.renderer!); From 1a94261375c22439ad257c396c274f4a1e91c6a9 Mon Sep 17 00:00:00 2001 From: answershuto Date: Thu, 12 May 2022 16:54:11 +0800 Subject: [PATCH 3/7] :bug: fix: should get constraints width of parent render object. --- kraken/lib/src/css/render_style.dart | 10 ++++++++-- kraken/lib/src/widget/element_to_widget_adaptor.dart | 3 ++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/kraken/lib/src/css/render_style.dart b/kraken/lib/src/css/render_style.dart index cb87314a18..ef293c9c43 100644 --- a/kraken/lib/src/css/render_style.dart +++ b/kraken/lib/src/css/render_style.dart @@ -638,7 +638,13 @@ class CSSRenderStyle RenderStyle? ancestorRenderStyle = _findAncestorWithNoDisplayInline(); // Should ignore renderStyle of display inline when searching for ancestors to stretch width. if (ancestorRenderStyle != null) { - logicalWidth = ancestorRenderStyle.contentBoxLogicalWidth; + if (ancestorRenderStyle.target.renderObjectManagerType == RenderObjectManagerType.FLUTTER_ELEMENT && renderBoxModel!.parent is RenderBox) { + RenderBox renderBox = renderBoxModel!.parent as RenderBox; + logicalWidth = renderBox.constraints.maxWidth; + } else { + logicalWidth = ancestorRenderStyle.contentBoxLogicalWidth; + } + // Should subtract horizontal margin of own from its parent content width. if (logicalWidth != null) { logicalWidth -= renderStyle.margin.horizontal; @@ -1126,7 +1132,7 @@ class CSSRenderStyle RenderStyle renderStyle = this; RenderStyle? parentRenderStyle = renderStyle.parent; while(parentRenderStyle != null) { - if (parentRenderStyle.effectiveDisplay != CSSDisplay.inline) { + if (parentRenderStyle.effectiveDisplay != CSSDisplay.inline || parentRenderStyle.target.renderObjectManagerType == RenderObjectManagerType.FLUTTER_ELEMENT) { break; } parentRenderStyle = parentRenderStyle.parent; diff --git a/kraken/lib/src/widget/element_to_widget_adaptor.dart b/kraken/lib/src/widget/element_to_widget_adaptor.dart index f05bad9bc0..378dfb292c 100644 --- a/kraken/lib/src/widget/element_to_widget_adaptor.dart +++ b/kraken/lib/src/widget/element_to_widget_adaptor.dart @@ -24,7 +24,8 @@ class KrakenElementToWidgetAdaptor extends RenderObjectWidget { // Children of custom element need RenderFlowLayout nesting, // otherwise the parent render layout will not be called when setting properties. if (_krakenNode is dom.Element) { - RenderFlowLayout renderFlowLayout = RenderFlowLayout(renderStyle: CSSRenderStyle(target: _krakenNode as dom.Element)); + CSSRenderStyle renderStyle = CSSRenderStyle(target: _krakenNode as dom.Element); + RenderFlowLayout renderFlowLayout = RenderFlowLayout(renderStyle: renderStyle); renderFlowLayout.insert(_krakenNode.renderer!); return renderFlowLayout; } else { From fbeacb935c3b9bcd6f4238135fc2e0d6221764a7 Mon Sep 17 00:00:00 2001 From: answershuto Date: Thu, 12 May 2022 17:54:27 +0800 Subject: [PATCH 4/7] :art: chore: add comment. --- kraken/lib/src/css/render_style.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/kraken/lib/src/css/render_style.dart b/kraken/lib/src/css/render_style.dart index ef293c9c43..85b9c62950 100644 --- a/kraken/lib/src/css/render_style.dart +++ b/kraken/lib/src/css/render_style.dart @@ -638,6 +638,7 @@ class CSSRenderStyle RenderStyle? ancestorRenderStyle = _findAncestorWithNoDisplayInline(); // Should ignore renderStyle of display inline when searching for ancestors to stretch width. if (ancestorRenderStyle != null) { + // If parentElement is WidgetElement, should not search for ancestors and get maxWidth of constraints for logicalWidth. if (ancestorRenderStyle.target.renderObjectManagerType == RenderObjectManagerType.FLUTTER_ELEMENT && renderBoxModel!.parent is RenderBox) { RenderBox renderBox = renderBoxModel!.parent as RenderBox; logicalWidth = renderBox.constraints.maxWidth; @@ -1132,6 +1133,7 @@ class CSSRenderStyle RenderStyle renderStyle = this; RenderStyle? parentRenderStyle = renderStyle.parent; while(parentRenderStyle != null) { + // If ancestor element is WidgetElement, should return it because should get maxWidth of constraints for logicalWidth. if (parentRenderStyle.effectiveDisplay != CSSDisplay.inline || parentRenderStyle.target.renderObjectManagerType == RenderObjectManagerType.FLUTTER_ELEMENT) { break; } From e2b8e61b3e09c7ec61cc1722416b6a02f53e5c05 Mon Sep 17 00:00:00 2001 From: answershuto Date: Fri, 13 May 2022 11:44:18 +0800 Subject: [PATCH 5/7] :bug: fix: constraints is null before layout. --- kraken/lib/src/css/render_style.dart | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/kraken/lib/src/css/render_style.dart b/kraken/lib/src/css/render_style.dart index 85b9c62950..cb8fdfb1cf 100644 --- a/kraken/lib/src/css/render_style.dart +++ b/kraken/lib/src/css/render_style.dart @@ -639,9 +639,9 @@ class CSSRenderStyle // Should ignore renderStyle of display inline when searching for ancestors to stretch width. if (ancestorRenderStyle != null) { // If parentElement is WidgetElement, should not search for ancestors and get maxWidth of constraints for logicalWidth. - if (ancestorRenderStyle.target.renderObjectManagerType == RenderObjectManagerType.FLUTTER_ELEMENT && renderBoxModel!.parent is RenderBox) { - RenderBox renderBox = renderBoxModel!.parent as RenderBox; - logicalWidth = renderBox.constraints.maxWidth; + RenderObject? renderObject = renderBoxModel!.parent as RenderObject; + if (ancestorRenderStyle.target.renderObjectManagerType == RenderObjectManagerType.FLUTTER_ELEMENT && renderObject is RenderBox && renderObject.hasSize) { + logicalWidth = renderObject.constraints.maxWidth; } else { logicalWidth = ancestorRenderStyle.contentBoxLogicalWidth; } From 5b8e356324b9fa940a6303f8ab05301e25e1fee2 Mon Sep 17 00:00:00 2001 From: answershuto Date: Fri, 13 May 2022 15:19:31 +0800 Subject: [PATCH 6/7] :bug: fix: When renderObject has not layouted, get constraints will trigger assets. --- kraken/lib/src/css/render_style.dart | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/kraken/lib/src/css/render_style.dart b/kraken/lib/src/css/render_style.dart index cb8fdfb1cf..3c2d78f091 100644 --- a/kraken/lib/src/css/render_style.dart +++ b/kraken/lib/src/css/render_style.dart @@ -640,8 +640,16 @@ class CSSRenderStyle if (ancestorRenderStyle != null) { // If parentElement is WidgetElement, should not search for ancestors and get maxWidth of constraints for logicalWidth. RenderObject? renderObject = renderBoxModel!.parent as RenderObject; - if (ancestorRenderStyle.target.renderObjectManagerType == RenderObjectManagerType.FLUTTER_ELEMENT && renderObject is RenderBox && renderObject.hasSize) { - logicalWidth = renderObject.constraints.maxWidth; + + + if (ancestorRenderStyle.target.renderObjectManagerType == RenderObjectManagerType.FLUTTER_ELEMENT && renderObject is RenderBox) { + try { + // When renderObject has not layouted, get constraints will trigger assets. + // Such as image resize will get _styleWidth and call this function before layout. + logicalWidth = renderObject.constraints.maxWidth; + } catch(e) { + logicalWidth = ancestorRenderStyle.contentBoxLogicalWidth; + } } else { logicalWidth = ancestorRenderStyle.contentBoxLogicalWidth; } From f4aa4d36365b5be0a95e9a6ce6ce3b295be90c34 Mon Sep 17 00:00:00 2001 From: answershuto Date: Fri, 13 May 2022 17:05:53 +0800 Subject: [PATCH 7/7] :art: chore: modify comment. --- kraken/lib/src/css/render_style.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/kraken/lib/src/css/render_style.dart b/kraken/lib/src/css/render_style.dart index 3c2d78f091..bdde1d7b73 100644 --- a/kraken/lib/src/css/render_style.dart +++ b/kraken/lib/src/css/render_style.dart @@ -644,7 +644,7 @@ class CSSRenderStyle if (ancestorRenderStyle.target.renderObjectManagerType == RenderObjectManagerType.FLUTTER_ELEMENT && renderObject is RenderBox) { try { - // When renderObject has not layouted, get constraints will trigger assets. + // When renderObject has not layouted, get constraints will trigger assert. // Such as image resize will get _styleWidth and call this function before layout. logicalWidth = renderObject.constraints.maxWidth; } catch(e) {