页面（page）

功能

page函数用于设置本页面的基本属性，包括将页面划分成的行、列数，此页中text和data控件的默认属性。代码格式上page函数和with联合使用用于分隔页面之间的代码。

每一个APP最多支持256个页面

参数

  • rows: 此页被划分的行数
  • colums: 此页被划分的列数
  • id: 每个page都有自己的唯一id，任意两个page的id不能重复，可以为数字或中英文字符串，写作 id="page1" 或 id=1。
  • first: 第一次进入页面时捕获焦点的控件id。格式为 first=id，id为此页面中可捕获焦点的控件id
  • prev: 上一页的页面id，按下数控系统按键板上的上一页按键跳转到相应id的页面。格式为 prev=id
  • next: 下一页的页面id，按下数控系统按键板上的下一页按键跳转到相应id的页面。格式为 next=id
  • bg_color: 页面的背景颜色
  • 当前页面默认设置: 若本页单独对text控件或data控件字体有整体设置，可加入text和data参数，text和data属性仅在本页面有效。若不想单独设置，则下面两个参数可以省略，省略时将采用默认设置。
    • text参数是一个元组，用( )括起来，可设置字体大小，颜色和对齐方式。写作text=(红色, f24x12, 左对齐)
    • data参数是一个元组，用( )括起来，可设置字体大小，颜色。写作data=(黄色, f24x12)
  • first：第一次进入页面时捕获焦点的控件id。格式为 first="id"，id为此页面中可捕获焦点的控件id
  • prev：上一页的页面id，按下数控系统按键板上的上一页按键跳转到相应id的页面。格式为 prev="id"
  • next：下一页的页面id，按下数控系统按键板上的下一页按键跳转到相应id的页面。格式为 next="id"

first/prev/next为V2.1新增参数，bg_color为3.0新增

示例

APP采用矩阵布局的形式，可以在page函数将页面划分成指定的行数和列数。下图将页面根据当前所设计的分辨率划分行和列，也可以自行划分行和列，通过分辨率划分行列可以对页面进行精细化设计。

使用viewport_size()函数获取当前可以控制的屏幕分辨率大小，并可以使用viewport_size()函数将该页面按分辨率进行划分行列，即1个像素代表1行，1列代表1列。 viewport_size()函数返回的数值与set_size()函数设置的数据有关，参见 页面布局尺寸

page

# coding: utf-8
from knd_ui import *

# 设置此APP的uuid，不同的APP此uuid必须不同
set_uuid('j6Hr5QQXmxs3yLELrKL7Qq_076d')

# 设置使用此APP的系统软件版本
sys_version("V7.1.00c_68728")

# 系统分辨率为800*600，显示标题，显示菜单
set_size(800, 600, title=False)

# 此APP的快捷入口：位置界面
shortcut_id(位置)

# 此APP根目录菜单名称为"简单示例"
set_name("简单示例")

# 此APP的目录名称为"示例目录"，在位置的应用界面下查看
set_category("示例目录")

# 此APP的默认显示页面的id为"main"
set_default_page("main")

# 按像素划分当前页面的行数，根据set_size()设置的数据自动计算
rows = viewport_size().height
# 按像素划分当前页面的列数，根据set_size()设置的数据自动计算
cols = viewport_size().width


# 此页的id为"main"，共有10行，5列，text为此页text控件设定了默认属性，bg_color为此页的背景色
with page(rows, cols, id="main", text=(白色, f20x10, 居中), bg_color=(24, 24, 24)):
    text("", (1, 1, 100, 100), border_visible=1, border_color=白色)
    text("位置：100行100列\n大小：50行200列", (100, 100, 50, 200), border_visible=1, border_color=红色)

    text(f"当前页面的行和列：{rows}×{cols}", (rows/2-25, 1, 50, cols))

    text("位置：406行600列\n大小：50行200列", (406, 600, 50, 200), border_visible=1, border_color=红色)

    menu("首页", "main")


# 在当前目录下新建_output文件夹，生成kui文件
generate(__file__)

单个APP可以包含多个页面，page函数和with联合使用用于分隔页面之间的代码。同时使用menu_from()函数，将菜单按键从指定页面中复制过来。

with page(456, 800, id="page1", text=(白色, f20x10, 居中), bg_color=(24, 24, 24)):

    text(f"当前页面为：第一页", (rows/2-25, 1, 50, cols))

    menu("第一页", "page1")
    menu("第二页", "page2")

with page(456, 800, id="page2", text=(白色, f20x10, 居中), bg_color=(24, 24, 24)):

    text(f"当前页面为：第二页", (rows/2-25, 1, 50, cols))

    menu_from("page1")  # 该页面的菜单按键来自于id为page1的页面