如何在 Apache Royale 的布局中将孩子居中？

Posted 2023-03-05

【中文标题】如何在 Apache Royale 的布局中将孩子居中？

【英文标题】：How to center childs in a layout on Apache Royale?

【发布时间】：2020-01-31 00:39:03

【问题描述】：

我寻找一种简单有效的方法，使用基本包将所有子项集中在一个容器中。 （因为混合基本布局和宝石布局会导致一些不必要的副作用）

我必须使用 CSS，珠子吗？如果两者都可用，有什么区别，我可以有每个的代码示例吗？

例如，您能告诉我如何修改此代码以居中 文本标签：

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">


    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>



    <js:initialView>
        <js:View>
            <js:beads>
                <js:VerticalLayout/>
            </js:beads>
            <js:Label text="How to center me on horizontal axis ?"/>
        </js:View>
    </js:initialView>

</js:Application>

感谢 yishayw，因为我不熟悉如何添加 css，所以我找到了方法并将完整的工作代码放在这里。我希望 js|View 会触发样式，但是用浏览器查看 css 我看到第一个“视图”的样式名称是“royale”

<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:j="library://ns.apache.org/royale/jewel"
               xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">

<fx:Style>
        @namespace j "library://ns.apache.org/royale/jewel";
        @namespace js "library://ns.apache.org/royale/basic";

    .royale 
        align-items :center;
    

    js|Label 
        color: #ff0000;
    
 </fx:Style>   

    <js:valuesImpl>
        <js:SimpleCSSValuesImpl />
    </js:valuesImpl>



    <js:initialView>
        <js:View >
            <js:beads>
                <js:VerticalFlexLayout />
            </js:beads>
            <js:Label text="How to center me on horizontal axis ?"/>
        </js:View>
    </js:initialView>

</js:Application>

问候

【参考方案1】：

尝试使用 VerticalFlexLayout 并将 align-items: center 添加到容器的样式中。