Skip to content

Latest commit

 

History

History
618 lines (475 loc) · 16 KB

系统自定义组件.md

File metadata and controls

618 lines (475 loc) · 16 KB

Slint 系统自定义组件

前言

Slint提供了一系列系统自定义组件，可以从"std-widgets.slint"。

所有系统自定义组件都支持内置元素的公共属性。

AboutSlint

显示Slint勋章，版本，没什么用

image-20230904041109056

常用简单按钮 Button

属性

属性 说明
checkable 按钮是否可以被选中（in bool）
checked 显示当前按钮是否已经被选中(in-out bool)
enable 按钮是否可以被点击（in bool）
has-foucus 按钮是否被聚焦(out bool)
icon 按钮图像(image)
text 按钮显示的文本 (string)
pressed 按钮按下时变为true (out bool)
primary 按钮主色，跟随系统，默认false (in bool)

回调

  • clicked ：按钮点击事件

example


import { Button } from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 200px;
  width: 200px;
  Button { 
    text: "primary btn";
    primary: true;
    clicked => {
      self.text = "clicked"
    }
  }
}

image-20230904042121220

标准按钮 StandardButton

定义了一套标准的按钮

属性 说明
标准按钮类型（StandardButton）

StandardButtonKind

使用此枚举将标准按钮添加到Dialog.外观和定位 这些StandardButton这取决于环境 (OS、UI环境等）。

  • ok：接受“确定”按钮Dialog，单击时将其关闭。
  • cancel：“取消”按钮，用于拒绝Dialog，单击时将其关闭。
  • apply：应接受来自 Dialog 而不关闭它。
  • close：“关闭”按钮，应关闭Dialog 而不看价值观。
  • reset：“重置”按钮，应重置Dialog 回到它的初始状态。
  • help：“帮助”按钮，单击该按钮时应显示上下文相关文档。
  • yes：“是”按钮，用于确认操作。
  • no：“否”按钮，用于拒绝操作。
  • abort：“中止”按钮，用于中止操作。
  • retry：“重试”按钮，用于重试失败的操作。
  • ignore：“忽略”按钮，用于忽略失败的操作。

example

import { StandardButton } from "std-widgets.slint";

export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  for kind[index] in [StandardButtonKind.abort,StandardButtonKind.apply,StandardButtonKind.cancel,StandardButtonKind.close]:StandardButton  {
    kind: kind;
    y:self.width * (index+1);
  }
  
}

image-20230904042850818

复选框CheckBox

属性

属性 说明
checked 显示当前复选框是否已经被选中(in-out bool)
enable 复选框是否可以被点击（in bool）
has-foucus 复选框是否被聚焦(out bool)
text 复选框显示的文本 (string)

回调

  • toggled()：复选框值变化事件

example

import { CheckBox } from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  CheckBox { 
    y: 100px;
    text: "Male";
  }
  CheckBox { 
    y: 200px;
    text: "Female";
  }
}

选择框 ComboBox

❓index和value分离是否并不很合理

属性

属性 说明
current-index 首选值索引 (in-out bool)
current-value 当前选中的文本 (in-out bool)
enabled 是否可以进行选择，默认true(in bool)
has-focus 选择框当前是否进行聚焦 (out bool)
model 选择框可选值 ([string])

回调

  • selected(string)：选择框当前选择的值

example

import { ComboBox} from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  ComboBox { 
    current-index: 2;
    current-value: "坤坤";
    model: ["篮球","唱","跳","Rap"];
  }
}

image-20230904125857889

组容器 GroupBox

GroupBox单纯只是把一些共通的组件组合到一起

属性

属性 说明
title 组标题 (in string)
enabled 是否可以进行交互，默认true(in bool)

example

import { ComboBox, GroupBox} from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  GroupBox { 
    title: "请选择";
    VerticalLayout {
      spacing: 10px;
      ComboBox { 
        current-index: 2;
        current-value: "坤坤";
        model: ["篮球","唱","跳","Rap"];
      }
      ComboBox { 
        current-index: 1;
        model: ["篮球","唱","跳","Rap"];
      }
    }
  }
}

image-20230904132015166

GridBox 网格盒子

可直接理解为GridLayout，由spacing控制间隙，非0，属性同GridLayout

example

import { GridBox } from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  GridBox { 
    spacing: 2px;
    Rectangle {background: red;height: 30px;width: 30px;}
    Rectangle {background: yellow;height: 30px;width: 30px;}
    Rectangle {background: green;height: 30px;width: 30px;}
   }
}

HorizontalBox

HorizontalBox同HorizontalLayout，间隙非0


import { GridBox , HorizontalBox} from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  HorizontalBox { 
    Rectangle {background: red;height: 30px;width: 30px;}
    Rectangle {background: yellow;height: 30px;width: 30px;}
    Rectangle {background: green;height: 30px;width: 30px;}
  }
}

行输入框 LineEdit

属性

属性 说明
text 文本内容 (in string)
enabled 是否可以输入内容，默认true(in bool)
font-size 字体大小（in length）
has-focus 输入框是否聚焦 (out bool)
horizontal-alignment 文本内容对齐(TextHorizontalAlignment)
read-only 是否只读（in bool）
placeholder-text 提示信息，占位文本（in string）
input-type 输入框类型（password，text）

TextHorizontalAlignment

控件的水平轴沿着的不同类型的文本对齐方式

  • left：文本将与包含框的左边缘对齐。
  • center：文本将在包含框内水平居中。
  • right：文本将与包含框的右侧对齐。

example

import { ComboBox, GroupBox, LineEdit} from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  LineEdit { 
    horizontal-alignment: left;
    placeholder-text: "请输入";
  }
}

image-20230904132754978

列表 ListView

ListView中只能有一个单个组件组成，而且这个单个组件必须是使用for循环进行构建的，并且这个ListView也是可滑动的

example

import { ListView } from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  ListView { 
    for color in [
      #000,
      #ddd,
      #ba5858
    ]: Rectangle {
      height: 30px;
      width: 30px;
      background: color;
    }

  }
}

image-20230904144412040

标准列表 StandardListView

通过model模型设置值

属性

属性 说明
current-item 当前选中的索引（in-out index）
model 值模型 (in StandardListViewItem)

StandardListViewItem

{text:T}

回调

  • set-current-item(_index: int_)：设置当前项并将其显示在视图中

example

import { StandardListView} from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  StandardListView { 
    current-item: 1;
    model: [
      {text:"1"},
      {text:"2"},
      {text:"3"},
      {text:"4"}
    ];
  }
}

image-20230904152142525

滑动窗口 ScrollView

ScrollView是一个可以滑动的窗口

属性 说明
enabled 用于将窗口呈现为禁用或启用（in bool）
has-focus 用于将窗口呈现为是否聚焦（in-out bool）
viewport-width / viewport-height
viewport-y / viewport-x
visible-width / visible-height

example


import {ScrollView} from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  ScrollView { 
    height: 300px;
    width: 200px;
    viewport-width: 300px;
    viewport-height: 300px;
    Rectangle {
      x:0px;
      y:0;
      height: 30px;
      width: 30px;
      background: red;
    }
    Rectangle {
      x:100px;
      y: 30px;
      height: 30px;
      width: 30px;
      background: green;
    }
    Rectangle {
      x:100px;
      y:100px;
      height: 30px;
      width: 30px;
      background: blue;
    }
  }
}

image-20230904144904835

滑动条 Slider

一个可滑动的滑动条，可以设置最大最小值

属性

属性 说明
enabled 用于将滑动条呈现为禁用或启用（in bool）
has-focus 滑动条是否聚焦（in-out bool）
view 滑动条的值 (in-out float)
maximum/ minimum

回调

  • changed(float)返回修改后的值事件

example


import { Slider } from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  Slider { 
    value: 30;
    minimum: 0;
    maximum: 100;
    width: 100px;
  }
}

image-20230904150321780

加载条 ProgressIndicator

属性

属性 说明
progress 进度（in float）
indeterminate 是否能通过值确认进度（in bool） 
import { ProgressIndicator } from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  ProgressIndicator { 
    height:10px;
    width: 100px;
    progress: 30%;
  
  }
}

image-20230904151624522

数字选择器 SpinBox

属性

属性 说明
enabled 用于将数字选择器呈现为禁用或启用（in bool）
has-focus 数字选择器是否聚焦（in-out bool）
view 数字选择器的值 (in-out float)
maximum/ minimum

example

import { ProgressIndicator , SpinBox} from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  SpinBox { 
    value: 50;
    maximum: 100;
    minimum: 0;
   }
}

image-20230904151810322

标准表格StandardTableView

属性

属性 说明
rows 行数据（in bool）
has-focus 数字选择器是否聚焦（in-out bool）
view 数字选择器的值 (in-out float)
maximum/ minimum

StandardListViewItem

{text:T}

TableColumn

TableColumn 用于定义TableView的列和列标题。

  • title （string）：描述列标题。
  • min-width （length）：定义列的最小值。
  • width （length）：列的当前宽度。
  • horizontal-stretch （float）：定义列的水平拉伸。
  • sort-order （SortOrder）：描述列的排序顺序。

SortOrder

此枚举表示sort-order属性的不同值。它用于按列对StandardTableView进行排序。

  • unsorted：该列是未排序的。
  • ascending：该列按升序排序。
  • descending：该列按降序排序。

回调

  • sort-ascending(int)：如果模型应按给定列升序排序，则发出。
  • sort-descending(int)：如果模型应按给定列降序排序，则发出。

方法

  • set-current-row(index: int)：设置当前行并将其显示在视图中

example

import {StandardTableView} from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  StandardTableView { 
    height: root.height;
    width: root.width;
    columns: [
      {title:"name"},
      {title:"age"}
    ];
    rows: [
      [
          { text: "Mat" }, { text: 16 },
      ],
      [
          { text: "Gary" }, { text: 21 },
      ],
    ];
  }
}

image-20230904153256842

开关 Switch

属性

属性 说明
text 显示文本（in string）
has-focus 是否聚焦（out bool）
enabled 是否可用 (in bool)
checked 是否选中(in-out bool)

回调

  • toggled()：开关值更改事件

example

import {Switch} from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 300px;
  width: 200px;
  Switch { 
    text: "is man";
   }
}

image-20230904160901592

TabWidget

example

import { TabWidget, TabWidgetImpl} from "std-widgets.slint";
export component MainWindow inherits Window {
  height: 200px;
  width: 200px;
  TabWidget { 
    current-index: 1;
    Tab{
      title: "1";
      Text {height: 100px;width: 200px;text: "1";}
    }
    Tab{
      title: "2";
      Text {height: 100px;width: 200px;text: "2";}
    }
  }
}