App
Modifier
App 页面中按顺序生效的布局与装饰，与 Compose 一致。
布局与装饰通过 modifier prop 指定，与 Compose 组件的 modifier 参数一致。从 supernode/app 导入 Modifier，链式调用即可构造。修饰符按调用顺序依次生效，与 Compose 完全一致。
import { Modifier, Text } from "supernode/app";
<Text modifier={Modifier.padding(8).clip(12).background("#FFFFFF").padding(16).fillMaxWidth()}>
Hello
</Text>| 修饰符 | 行为 |
|---|---|
padding(all) / padding({ start, top, end, bottom }) / padding({ horizontal, vertical }) | 在链上其后的内容四周留出空白。 |
width(dp) / height(dp) / size(dp) / size(width, height) | 设置固定尺寸。 |
fillMaxWidth(fraction?) / fillMaxHeight(fraction?) / fillMaxSize(fraction?) | 占满父容器的一定比例，取值 (0, 1]，默认 1。 |
weight(weight, fill?) | 分配 Column 或 Row 的剩余空间，详见 Weight。 |
background(color) | 绘制背景，详见颜色取值。 |
clip(radius) | 对其后绘制的内容裁剪圆角。 |
append(other) | 拼接另一条链，详见组合修饰符。 |
与 Compose 的 Modifier.padding 一致，padding 可以是一个数字（四边相同），也可以是四边对象 { start, top, end, bottom } 或方向对象 { horizontal, vertical }，同一个对象不能混用两种写法。start 和 end 跟随布局方向。数值单位为 dp。视图默认按内容自适应大小。
顺序
每个修饰符都包裹它之后的全部内容，因此同样的调用换个顺序，效果就不同：
<Column>
{/* padding 写在 background 之前，相当于外边距。 */}
<Text modifier={Modifier.padding(8).background("#FFE0E0")}>外边距</Text>
{/* padding 写在 background 之后，是内边距。 */}
<Text modifier={Modifier.background("#FFE0E0").padding(8)}>内边距</Text>
{/* 先 clip 再 background，背景才是圆角。 */}
<Text modifier={Modifier.clip(12).background("#FFE0E0").padding(8)}>圆角</Text>
</Column>Weight
与 Compose RowScope、ColumnScope 中的 Modifier.weight 一致，weight 让设置了它的子视图按比例分配 Row 或 Column 主轴上的剩余空间。它只能用在 Column 和 Row 的直接子视图上（fragment 的子视图视为外层容器的子视图），用在其他位置会带着视图路径报错。fill = false 时子视图最多占满分到的空间，而不会被强制撑满。
import { Modifier, Row, Spacer, Text } from "supernode/app";
<Row verticalAlignment="center" modifier={Modifier.fillMaxWidth().padding(16)}>
<Text>标题</Text>
{/* 把“编辑”推到行尾。 */}
<Spacer modifier={Modifier.weight(1)} />
<Text>编辑</Text>
</Row>组合修饰符
修饰符是不可变的，每次调用都返回新链。用 append 把父组件传入的 modifier 与自己的修饰组合起来，或者按条件追加修饰。它没有沿用 Compose 的 then，因为带 then 方法的对象会被 await 当成 Promise。append 只接受从 supernode/app 导入的 Modifier。
import { Modifier, Text } from "supernode/app";
function Tag({ label, selected, modifier = Modifier }: { label: string; selected: boolean; modifier?: Modifier }) {
return (
<Text modifier={modifier.padding({ horizontal: 8, vertical: 4 }).append(selected ? Modifier.background("#E0F0FF") : Modifier)}>
{label}
</Text>
);
}