跨平台自适应布局yoga特性详解

副标题#e#

yoga是facebook打造的一个跨IOS、Android、Window平台在内的布局引擎，兼容Flexbox布局方式，让界面更加简单。

Yoga官网：https://facebook.github.io/yoga/

官网上描述的特性包括：

完全兼容Flexbox布局，遵循W3C的规范

支持java、C#、Objective-C、C四种语言

底层代码使用C语言编写，性能不是问题

支持流行框架如React Native

目前在已开源的鸿蒙组件(https://gitee.com/openharmony-tpc/yoga)的功能现状如下：

native层和接口已经打通

支持自定义xml属性来控制布局(通过YogaLayout)

设置布局中不支持Image控件(onDrawCanvas暂不支持主动回调，所以yoga没办法扫描到它)，请使用Text控件替代

不支持VirtualYogaLayout

如何使用

首先我们在MainAbility中定义界面路由。

public class MainAbility extends Ability { 

    @Override 

    public void onStart(Intent intent) { 

        super.onStart(intent); 

        super.setMainRoute(MainAbilitySlice.class.getName()); 

        addActionRoute("action.dydrawnode.slice", DynamicsDrawNodeSlice.class.getName()); 

        addActionRoute("action.showrow.slice", ShowRowAbilitySlice.class.getName()); 

        addActionRoute("action.inflate.slice", BenchmarkInflateAbilitySlice.class.getName()); 

    } 

} 

然后我们来到MainAbilitySlice,其实就是做了一个向其他界面跳转的动作，并提前加载yoga的so库。

public class MainAbilitySlice extends AbilitySlice { 

    static { 

        System.loadLibrary("yoga"); 

        System.loadLibrary("yogacore"); 

        System.loadLibrary("fb"); 

    } 

    @Override 

    public void onStart(Intent intent) { 

        super.onStart(intent); 

        setUIContent(ResourceTable.Layout_main_layout); 

        Button btn0= (Button) findComponentById(ResourceTable.Id_btn_1); 

        btn0.setClickedListener(component -> { 

            Intent intent1 = new Intent(); 

            Operation operation = new Intent.OperationBuilder() 

                    .withAction("action.dydrawnode.slice") 

                    .build(); 

            intent1.setOperation(operation); 

            startAbilityForResult(intent1, 1); 

        }); 

        Button btn2= (Button) findComponentById(ResourceTable.Id_btn_2); 

        btn2.setClickedListener(component -> { 

            Intent intent1 = new Intent(); 

            Operation operation = new Intent.OperationBuilder() 

#p#副标题#e#

                    .withAction("action.showrow.slice") 

                    .build(); 

            intent1.setOperation(operation); 

            startAbilityForResult(intent1, 1); 

        }); 

        Button btn1= (Button) findComponentById(ResourceTable.Id_btn_3); 

        btn1.setClickedListener(component -> { 

            Intent intent1 = new Intent(); 

            Operation operation = new Intent.OperationBuilder() 

                    .withAction("action.inflate.slice") 

                    .build(); 

            intent1.setOperation(operation); 

            startAbilityForResult(intent1, 1); 

        }); 

    } 

    @Override 

    public void onActive() { 

        super.onActive(); 

    } 

    @Override 

    public void onForeground(Intent intent) { 

        super.onForeground(intent); 

    }