概览 - OneScript

所有视图都支持 modifier 属性。从 onescript/views 导入 Modifier，像 SwiftUI 一样链式调用来构建。Modifier 按调用顺序应用。

本节收录无需特定父布局即可生效的通用修饰符。布局专用修饰符记录在对应布局页面中。

本节中的数值尺寸单位均为 pt（point）。

import {
  Color, Font, Modifier, Shape, Text,
} from "onescript/views"

<Text
  modifier={Modifier
    .font(Font.body)
    .padding(12)
    .background(Color.systemGray6)
    .clipShape(Shape.rect(8))}
>
  内容
</Text>

顺序

每个 Modifier 都作用于它之前所有调用的结果，因此同样的调用换个顺序会得到不同的效果：

import { Color, Modifier, Shape, Text, VStack } from "onescript/views"

<VStack spacing={12}>
  {/* 背景包含内边距。 */}
  <Text modifier={Modifier
    .padding(12)
    .background(Color.systemGray6)}>
    内边距在内
  </Text>
  {/* 内边距在背景之外。 */}
  <Text modifier={Modifier
    .background(Color.systemGray6)
    .padding(12)}>
    内边距在外
  </Text>
  {/* 在背景之后裁切，得到圆角背景。 */}
  <Text modifier={Modifier
    .padding(12)
    .background(Color.systemGray6)
    .clipShape(Shape.rect(8))}>
    圆角
  </Text>
</VStack>

组合 Modifier

Modifier 不可变：每次调用都返回新的链，Modifier 本身就是空链。使用 append(other) 追加父组件传入的 Modifier，或按条件追加。之所以叫 append 而不是 then，是因为带 then 方法的对象会被 await 当作 Promise。

import { Color, Font, Modifier, Shape, Text } from "onescript/views"

function Badge(props: { label: string, selected: boolean, modifier?: Modifier }) {
  return (
    <Text
      modifier={Modifier
        .font(Font.caption)
        .padding({ horizontal: 8, vertical: 4 })
        .append(props.selected ? Modifier.background(Color.blue) : Modifier)
        .clipShape(Shape.capsule)
        .append(props.modifier ?? Modifier)}
    >
      {props.label}
    </Text>
  )
}

modifier 只接受来自 onescript/views 的 Modifier，传入其他值会抛出 TypeError。

布局与尺寸

Modifier	用途
`padding`	在内容周围增加空间。
`frame`	应用固定或弹性尺寸。

外观与裁切

Modifier	用途
`background`	在当前结果后方绘制形状样式。
`clipShape`	使用矩形、圆形或胶囊形裁切。
`clipped`	将绘制内容裁切到 frame 边界。

文本与环境

Modifier	用途
`font`	设置可继承字体。
`fontWeight`	设置可继承字重。
`foregroundStyle`	设置可继承前景形状样式。
`italic`	应用斜体。
`lineLimit`	限制文本可占用的行数。
`disabled`	禁用视图层级中的控件。
`controlSize`	设置控件的首选尺寸。
`buttonStyle`	设置后代 Button 的原生样式。

列表与控件

Modifier	用途
`toggleStyle`	设置后代 Toggle 的原生样式。
`pickerStyle`	设置后代 Picker 的原生样式。
`labelStyle`	设置后代 Label 显示标题、图标还是两者。
`progressViewStyle`	设置后代 ProgressView 的原生样式。
`datePickerStyle`	设置后代 DatePicker 的原生样式。
`labelsHidden`	隐藏控件的标签。
`tag`	标记 Picker 选项或 List 行代表的值。
`listStyle`	设置 List 的原生样式。
`formStyle`	设置 Form 的原生样式。

缩放

Modifier	用途
`scaledToFit`	保持宽高比，将视图缩放至完整适配可用空间。
`scaledToFill`	保持宽高比，将视图缩放至填满可用空间。

Modifier	用途
`toolbar`	在导航栏或底部栏放置条目。
`navigationTitle`	设置页面标题。
`navigationBarTitleDisplayMode`	设置标题的显示方式。

弹出呈现

Modifier	用途
`sheet`	从底部弹出卡片。
`fullScreenCover`	覆盖整个屏幕。
`popover`	在视图旁边显示气泡。
`alert`	显示提示框。
`confirmationDialog`	显示一组操作供用户选择。

概览

本页目录