4.LinearWidget.md

目的

目的：学习 LinearWidget 的简单用法。

内容

往 LinearWidget 中加入 2 个 TextWidget。

简介

LinearLayout 是布局中最常用的控件之一，这一节介绍如何使用 LinearrWidget。

效果

在中间显示 id 和 name。 点击屏幕后，触发刷新数据。

准备

复制入门教程3的中2个类 WidgetActivity 和 StatefulUserWidget

StatefulUserWidget

将泛型换成 Linear

StatefulWidget<LinearLayout, LinearWidget>

createState

在上一节的基础上，把 TextWidget 改成 LinearWidget，并加入2个 TextWidget 作为 children。

    private TextWidget twId;
    private TextWidget twName;

    @Override
    protected State<LinearWidget> createState(Context context, Lifecycle lifecycle) {
        twId = new TextWidget(context, lifecycle);
        twName = new TextWidget(context, lifecycle);
        LinearWidget root = new LinearWidget(context, lifecycle, twId, twName);
        return StateUtils.create(root);
    }

initWidget

设置 LinearWidget 的方向、重心、宽高等。

    @Override
    public void initWidget(LinearWidget widget) {
        widget
                .orientation(LinearWidget.vertical)
                .gravity(Gravity.CENTER)
                .matchParent()
                .onClickListener(v -> setState(() -> {
                    user = UserDataSource.getInstance().getUser();
                }));
		update();
    }

update

把 ui 和 data 关联起来。

    @Override
    public void update() {
        super.update();
        twId.text(user.getId() + "");
        twName.text(user.getName());
    }

总结

这里简单介绍了 LinearWidget 的用法。 这也是第一个使用的容器 Widget。

到这里为止，你应该大致对 Widget 有一定的了解了，后面还会详细介绍各种常用的 Widget 和 项目中常见的案例。