修饰符
借助修饰符，您可以修饰或扩充可组合项。您可以使用修饰符来执行以下操作：
更改可组合项的大小、布局、行为和外观
添加信息，如无障碍标签
处理用户输入
添加高级互动，如使元素可点击、可滚动、可拖动或可缩放
import com.m8test.script.GlobalVariables._activity
import com.m8test.script.GlobalVariables._composeView
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private fun Greeting(slot: Slot<out Modifier>, name: String) {
slot.Column {
// 设置 Column 的修饰符
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setRed(255) }, { shapes -> shapes.getRectangleShape() })
}
setContent {
Text {
// 设置 Text 组件显示的文本
setText("Hello")
}
Text {
// 设置 Text 组件显示的文本
setText(name)
}
}
}
}
fun side1Run() {
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(this, "M8Test")
}
// 启动一个Activity用于显示脚本界面
_activity.start()
}
//-m8test-remove side1Run();
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private static def Greeting(Slot<? extends Modifier> slot, String name) {
slot.Column { column ->
// 设置 Column 的修饰符
column.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setRed(255) }, { shapes -> shapes.getRectangleShape() })
}
column.setContent { columnSlot ->
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText("Hello")
}
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText(name)
}
}
}
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create { slot ->
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
}
// 启动一个Activity用于显示脚本界面
$activity.start()
/**
* 垂直方向上显示两个文本组件
* @param {Packages.com.m8test.script.core.api.ui.compose.slot.Slot<Packages.com.m8test.script.core.api.ui.compose.modifier.Modifier>} slot
* @param {string} name
*/
function Greeting(slot, name) {
slot.Column(column => {
// 设置 Column 的修饰符
column.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setRed(255), shapes => shapes.getRectangleShape());
});
column.setContent(columnSlot => {
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText("Hello");
});
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText(name);
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create(slot => {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test");
});
// 启动一个Activity用于显示脚本界面
$activity.start();
-- 垂直方向上显示两个文本组件
local function Greeting(slot, name)
slot:Column(function(column)
-- 设置 Column 的修饰符
column:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
end)
column:setContent(function(columnSlot)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText("Hello")
end)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText(name)
end)
end)
end)
end
-- 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView:create(function(slot)
-- 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end)
-- 启动一个Activity用于显示脚本界面
_activity:start()
<?php
use m8test_java\com\m8test\script\core\api\ui\compose\modifier\Modifier;
use m8test_java\com\m8test\script\core\api\ui\compose\slot\Slot;
/** @var m8test_java\com\m8test\script\core\api\ui\compose\ComposeView $composeView */
global $composeView;
/** @var m8test_java\com\m8test\script\core\api\ui\Activity $activity */
global $activity;
// 垂直方向上显示两个文本组件
/** @param Slot $slot */
function Greeting($slot, string $name)
{
$slot->Column(function ($column) use ($name) {
// 设置 Column 的修饰符
$column->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
});
$column->setContent(function ($columnSlot) use ($name) {
$columnSlot->Text(function ($text) {
// 设置 Text 组件显示的文本
$text->setText(javaString("Hello"));
});
$columnSlot->Text(function ($text) use ($name) {
// 设置 Text 组件显示的文本
$text->setText($name);
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView->create(function ($slot) {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting($slot, javaString("M8Test"));
});
// 启动一个Activity用于显示脚本界面
$activity->start();
# 导入所需的全局变量
from m8test_java.com.m8test.script.GlobalVariables import _activity
from m8test_java.com.m8test.script.GlobalVariables import _composeView
# 导入所需的Java类
from m8test_java.com.m8test.script.core.api.ui.compose.modifier.Modifier import Modifier
from m8test_java.com.m8test.script.core.api.ui.compose.slot.Slot import Slot
# 垂直方向上显示两个文本组件
def Greeting(slot: Slot, name: str):
slot.Column(lambda column: (
# 设置 Column 的修饰符
column.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
# Groovy的 { it.setRed(255) } 对应 lambda it: it.setRed(255)
# Groovy的 { shapes -> shapes.getRectangleShape() } 对应 lambda shapes: shapes.getRectangleShape()
modifier.background(lambda it: it.setRed(255), lambda shapes: shapes.getRectangleShape())
)),
column.setContent(lambda columnSlot: (
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText("Hello")
)),
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText(name)
))
))
))
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create(lambda slot: (
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
))
# 启动一个Activity用于显示脚本界面
_activity.start()
# encoding: utf-8
# 垂直方向上显示两个文本组件
def Greeting(slot, name)
slot.Column do |column|
# 设置 Column 的修饰符
column.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
end
column.setContent do |columnSlot|
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText("Hello")
end
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText(name)
end
end
end
end
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create do |slot|
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end
# 启动一个Activity用于显示脚本界面
$activity.start()
您可以将以下函数连在一起以将其组合起来：
import com.m8test.script.GlobalVariables.*
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private fun Greeting(slot: Slot<out Modifier>, name: String) {
slot.Column {
// 设置 Column 的修饰符
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setRed(255) }, { shapes -> shapes.getRectangleShape() })
.fillMaxWidth(1.0f) // 宽度最大, 可以通过链式调用添加更多的修饰符
}
setContent {
Text {
// 设置 Text 组件显示的文本
setText("Hello")
}
Text {
// 设置 Text 组件显示的文本
setText(name)
}
}
}
}
fun side1Run() {
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(this, "M8Test")
}
// 启动一个Activity用于显示脚本界面
_activity.start()
}
//-m8test-remove side1Run();
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private static def Greeting(Slot<? extends Modifier> slot, String name) {
slot.Column { column ->
// 设置 Column 的修饰符
column.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setRed(255) }, { shapes -> shapes.getRectangleShape() })
.fillMaxWidth(1.0f) // 宽度最大, 可以通过链式调用添加更多的修饰符
}
column.setContent { columnSlot ->
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText("Hello")
}
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText(name)
}
}
}
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create { slot ->
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
}
// 启动一个Activity用于显示脚本界面
$activity.start()
/**
* 垂直方向上显示两个文本组件
* @param {Packages.com.m8test.script.core.api.ui.compose.slot.Slot<Packages.com.m8test.script.core.api.ui.compose.modifier.Modifier>} slot
* @param {string} name
*/
function Greeting(slot, name) {
slot.Column(column => {
// 设置 Column 的修饰符
column.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setRed(255), shapes => shapes.getRectangleShape())
.fillMaxWidth(1.0); // 宽度最大, 可以通过链式调用添加更多的修饰符
});
column.setContent(columnSlot => {
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText("Hello");
});
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText(name);
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create(slot => {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test");
});
// 启动一个Activity用于显示脚本界面
$activity.start();
-- import com.m8test.script.core.api.ui.compose.modifier.Modifier -- Lua中不需要
-- import com.m8test.script.core.api.ui.compose.slot.Slot -- Lua中不需要
-- 垂直方向上显示两个文本组件
local function Greeting(slot, name)
slot:Column(function(column)
-- 设置 Column 的修饰符
column:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(color) color:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
:fillMaxWidth(1.0) -- 宽度最大, 可以通过链式调用添加更多的修饰符
end)
column:setContent(function(columnSlot)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText("Hello")
end)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText(name)
end)
end)
end)
end
-- 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView:create(function(slot)
-- 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end)
-- 启动一个Activity用于显示脚本界面
_activity:start()
<?php
use m8test_java\com\m8test\script\core\api\ui\compose\modifier\Modifier;
use m8test_java\com\m8test\script\core\api\ui\compose\slot\Slot;
/** @var m8test_java\com\m8test\script\core\api\ui\compose\ComposeView $composeView */
global $composeView;
/** @var m8test_java\com\m8test\script\core\api\ui\Activity $activity */
global $activity;
// 垂直方向上显示两个文本组件
/** @param Slot $slot */
function Greeting($slot, string $name)
{
$slot->Column(function ($column) use ($name) {
// 设置 Column 的修饰符
$column->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
)->fillMaxWidth(1.0); // 宽度最大, 可以通过链式调用添加更多的修饰符
});
$column->setContent(function ($columnSlot) use ($name) {
$columnSlot->Text(function ($text) {
// 设置 Text 组件显示的文本
$text->setText(javaString("Hello"));
});
$columnSlot->Text(function ($text) use ($name) {
// 设置 Text 组件显示的文本
$text->setText($name);
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView->create(function ($slot) {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting($slot, javaString("M8Test"));
});
// 启动一个Activity用于显示脚本界面
$activity->start();
# 导入所需的全局变量
from m8test_java.com.m8test.script.GlobalVariables import _composeView
from m8test_java.com.m8test.script.GlobalVariables import _activity
# 导入所需的Java类
from m8test_java.com.m8test.script.core.api.ui.compose.modifier.Modifier import Modifier
from m8test_java.com.m8test.script.core.api.ui.compose.slot.Slot import Slot
# 垂直方向上显示两个文本组件
def Greeting(slot: Slot, name: str):
slot.Column(lambda column: (
# 设置 Column 的修饰符
column.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
# 链式调用在Python的lambda中可以直接作为单个表达式返回
modifier.background(
lambda it: it.setRed(255),
lambda shapes: shapes.getRectangleShape()
).fillMaxWidth(1.0) # 宽度最大, 可以通过链式调用添加更多的修饰符
)),
column.setContent(lambda columnSlot: (
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText("Hello")
)),
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText(name)
))
))
))
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create(lambda slot: (
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
))
# 启动一个Activity用于显示脚本界面
_activity.start()
# encoding: utf-8
# 垂直方向上显示两个文本组件
def Greeting(slot, name)
slot.Column do |column|
# 设置 Column 的修饰符
column.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
.fillMaxWidth(1.0) # 宽度最大, 可以通过链式调用添加更多的修饰符
end
column.setContent do |columnSlot|
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText("Hello")
end
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText(name)
end
end
end
end
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create do |slot|
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end
# 启动一个Activity用于显示脚本界面
$activity.start()
请注意，在上面的代码中，结合使用了不同的修饰符函数。
padding 在元素周围留出空间。
fillMaxWidth 使可组合项填充其父项为它提供的最大宽度。
修饰符顺序很重要
修饰符函数的顺序非常重要。由于每个函数都会对 Modifier 进行更改，因此顺序会影响最终结果。让我们来看看这方面的一个示例：
import com.m8test.script.GlobalVariables.*
fun side1Run() {
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Column {
setContent {
Text {
// 设置 Text 组件显示的文本
setText("M8Test")
// 这个Modifier先设置了padding，再设置border
setModifier {
padding { setAll { it.fromInt(16) } }
border({ it.fromInt(2) }, { setRed(255) }, { shapes -> shapes.getRectangleShape() })
}
}
Text {
// 设置 Text 组件显示的文本
setText("M8Test")
// 这个Modifier先设置了border再设置padding
setModifier {
border({ it.fromInt(2) }, { setRed(255) }, { shapes -> shapes.getRectangleShape() })
padding { setAll { it.fromInt(16) } }
}
}
}
}
}
// 启动一个Activity用于显示脚本界面
_activity.start()
}
//-m8test-remove side1Run();
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create { slot ->
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
slot.Column { column ->
column.setContent { columnSlot ->
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText("M8Test")
// 这个Modifier先设置了padding，再设置border
text.setModifier { modifier ->
modifier.padding { paddingValues -> paddingValues.setAll { it.fromInt(16) } }
modifier.border({ it.fromInt(2) }, { color -> color.setRed(255) }, { shapes -> shapes.getRectangleShape() })
}
}
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText("M8Test")
// 这个Modifier先设置了border再设置padding
text.setModifier { modifier ->
modifier.border({ it.fromInt(2) }, { color -> color.setRed(255) }, { shapes -> shapes.getRectangleShape() })
modifier.padding { paddingValues -> paddingValues.setAll { it.fromInt(16) } }
}
}
}
}
}
// 启动一个Activity用于显示脚本界面
$activity.start()
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create(slot => {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
slot.Column(column => {
column.setContent(columnSlot => {
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText("M8Test");
// 这个Modifier先设置了padding，再设置border
text.setModifier(modifier => {
modifier.padding(paddingValues => paddingValues.setAll(it => it.fromInt(16)));
modifier.border(it => it.fromInt(2), color => color.setRed(255), shapes => shapes.getRectangleShape());
});
});
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText("M8Test");
// 这个Modifier先设置了border再设置padding
text.setModifier(modifier => {
modifier.border(it => it.fromInt(2), color => color.setRed(255), shapes => shapes.getRectangleShape());
modifier.padding(paddingValues => paddingValues.setAll(it => it.fromInt(16)));
});
});
});
});
});
// 启动一个Activity用于显示脚本界面
$activity.start();
-- 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView:create(function(slot)
-- 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
slot:Column(function(column)
column:setContent(function(columnSlot)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText("M8Test")
-- 这个Modifier先设置了padding，再设置border
text:setModifier(function(modifier)
modifier:padding(function(paddingValues) paddingValues:setAll(function(it) return it:fromInt(16) end) end)
modifier:border(function(it) return it:fromInt(2) end, function(color) color:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
end)
end)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText("M8Test")
-- 这个Modifier先设置了border再设置padding
text:setModifier(function(modifier)
modifier:border(function(it) return it:fromInt(2) end, function(color) color:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
modifier:padding(function(paddingValues) paddingValues:setAll(function(it) return it:fromInt(16) end) end)
end)
end)
end)
end)
end)
-- 启动一个Activity用于显示脚本界面
_activity:start()
<?php
/** @var m8test_java\com\m8test\script\core\api\ui\compose\ComposeView $composeView */
global $composeView;
/** @var m8test_java\com\m8test\script\core\api\ui\Activity $activity */
global $activity;
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView->create(function ($slot) {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
$slot->Column(function ($column) {
$column->setContent(function ($columnSlot) {
$columnSlot->Text(function ($text) {
// 设置 Text 组件显示的文本
$text->setText(javaString("M8Test"));
// 这个Modifier先设置了padding，再设置border
$text->setModifier(function ($modifier) {
$modifier->padding(function ($paddingValues) {
$paddingValues->setAll(function ($it) {
return $it->fromInt(16);
});
});
$modifier->border(
function ($it) { return $it->fromInt(2); },
function ($color) { $color->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
});
});
$columnSlot->Text(function ($text) {
// 设置 Text 组件显示的文本
$text->setText(javaString("M8Test"));
// 这个Modifier先设置了border再设置padding
$text->setModifier(function ($modifier) {
$modifier->border(
function ($it) { return $it->fromInt(2); },
function ($color) { $color->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
$modifier->padding(function ($paddingValues) {
$paddingValues->setAll(function ($it) {
return $it->fromInt(16);
});
});
});
});
});
});
});
// 启动一个Activity用于显示脚本界面
$activity->start();
# 导入所需的全局变量
from m8test_java.com.m8test.script.GlobalVariables import _composeView
from m8test_java.com.m8test.script.GlobalVariables import _activity
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create(lambda slot: (
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
slot.Column(lambda column: (
column.setContent(lambda columnSlot: (
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText("M8Test"),
# 这个Modifier先设置了padding，再设置border
text.setModifier(lambda modifier: (
modifier.padding(lambda paddingValues: paddingValues.setAll(lambda it: it.fromInt(16))),
modifier.border(lambda it: it.fromInt(2), lambda color: color.setRed(255), lambda shapes: shapes.getRectangleShape())
))
)),
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText("M8Test"),
# 这个Modifier先设置了border再设置padding
text.setModifier(lambda modifier: (
modifier.border(lambda it: it.fromInt(2), lambda color: color.setRed(255), lambda shapes: shapes.getRectangleShape()),
modifier.padding(lambda paddingValues: paddingValues.setAll(lambda it: it.fromInt(16)))
))
))
))
))
))
# 启动一个Activity用于显示脚本界面
_activity.start()
# encoding: utf-8
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create do |slot|
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
slot.Column do |column|
column.setContent do |columnSlot|
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText("M8Test")
# 这个Modifier先设置了padding，再设置border
text.setModifier do |modifier|
modifier.padding { |paddingValues| paddingValues.setAll { |it| it.fromInt(16) } }
modifier.border(lambda { |it| it.fromInt(2) }, lambda { |color| color.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
end
end
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText("M8Test")
# 这个Modifier先设置了border再设置padding
text.setModifier do |modifier|
modifier.border(lambda { |it| it.fromInt(2) }, lambda { |color| color.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
modifier.padding { |paddingValues| paddingValues.setAll { |it| it.fromInt(16) } }
end
end
end
end
end
# 启动一个Activity用于显示脚本界面
$activity.start()
内置修饰符
Jetpack Compose 提供了一个内置修饰符列表，可帮助您修饰或扩充可组合项。以下是一些用于调整布局的常见修饰符。
padding 和 size
默认情况下，Compose 中提供的布局会封装其子项。不过，您可以使用 size 修饰符设置尺寸：
import com.m8test.script.GlobalVariables.*
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private fun Greeting(slot: Slot<out Modifier>, name: String) {
slot.Column {
// 设置 Column 的修饰符
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setRed(255) }, { shapes -> shapes.getRectangleShape() })
size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
setContent {
Text {
// 设置 Text 组件显示的文本
setText("Hello")
}
Text {
// 设置 Text 组件显示的文本
setText(name)
}
}
}
}
fun side1Run() {
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(this, "M8Test")
}
// 启动一个Activity用于显示脚本界面
_activity.start()
}
//-m8test-remove side1Run();
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private static def Greeting(Slot<? extends Modifier> slot, String name) {
slot.Column { column ->
// 设置 Column 的修饰符
column.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setRed(255) }, { shapes -> shapes.getRectangleShape() })
modifier.size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
column.setContent { columnSlot ->
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText("Hello")
}
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText(name)
}
}
}
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create { slot ->
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
}
// 启动一个Activity用于显示脚本界面
$activity.start()
/**
* 垂直方向上显示两个文本组件
* @param {Packages.com.m8test.script.core.api.ui.compose.slot.Slot<Packages.com.m8test.script.core.api.ui.compose.modifier.Modifier>} slot
* @param {string} name
*/
function Greeting(slot, name) {
slot.Column(column => {
// 设置 Column 的修饰符
column.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setRed(255), shapes => shapes.getRectangleShape());
modifier.size(it => it.createSize(it.fromInt(200), it.fromInt(100)));
});
column.setContent(columnSlot => {
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText("Hello");
});
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText(name);
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create(slot => {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test");
});
// 启动一个Activity用于显示脚本界面
$activity.start();
-- 垂直方向上显示两个文本组件
local function Greeting(slot, name)
slot:Column(function(column)
-- 设置 Column 的修饰符
column:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
modifier:size(function(it) return it:createSize(it:fromInt(200), it:fromInt(100)) end)
end)
column:setContent(function(columnSlot)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText("Hello")
end)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText(name)
end)
end)
end)
end
-- 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView:create(function(slot)
-- 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end)
-- 启动一个Activity用于显示脚本界面
_activity:start()
<?php
use m8test_java\com\m8test\script\core\api\ui\compose\modifier\Modifier;
use m8test_java\com\m8test\script\core\api\ui\compose\slot\Slot;
/** @var m8test_java\com\m8test\script\core\api\ui\compose\ComposeView $composeView */
global $composeView;
/** @var m8test_java\com\m8test\script\core\api\ui\Activity $activity */
global $activity;
// 垂直方向上显示两个文本组件
/** @param Slot $slot */
function Greeting($slot, string $name)
{
$slot->Column(function ($column) use ($name) {
// 设置 Column 的修饰符
$column->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
$modifier->size(function ($it) {
return $it->createSize($it->fromInt(200), $it->fromInt(100));
});
});
$column->setContent(function ($columnSlot) use ($name) {
$columnSlot->Text(function ($text) {
// 设置 Text 组件显示的文本
$text->setText(javaString("Hello"));
});
$columnSlot->Text(function ($text) use ($name) {
// 设置 Text 组件显示的文本
$text->setText($name);
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView->create(function ($slot) {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting($slot, javaString("M8Test"));
});
// 启动一个Activity用于显示脚本界面
$activity->start();
# 导入所需的全局变量
from m8test_java.com.m8test.script.GlobalVariables import _composeView
from m8test_java.com.m8test.script.GlobalVariables import _activity
# 导入所需的Java类
from m8test_java.com.m8test.script.core.api.ui.compose.modifier.Modifier import Modifier
from m8test_java.com.m8test.script.core.api.ui.compose.slot.Slot import Slot
# 垂直方向上显示两个文本组件
def Greeting(slot: Slot, name: str):
slot.Column(lambda column: (
# 设置 Column 的修饰符
column.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
# { it.setRed(255) } -> lambda it: it.setRed(255)
# { shapes -> shapes.getRectangleShape() } -> lambda shapes: shapes.getRectangleShape()
modifier.background(lambda it: it.setRed(255), lambda shapes: shapes.getRectangleShape()),
modifier.size(lambda it: it.createSize(it.fromInt(200), it.fromInt(100)))
)),
column.setContent(lambda columnSlot: (
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText("Hello")
)),
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText(name)
))
))
))
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create(lambda slot: (
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
))
# 启动一个Activity用于显示脚本界面
_activity.start()
# encoding: utf-8
# 垂直方向上显示两个文本组件
def Greeting(slot, name)
slot.Column do |column|
# 设置 Column 的修饰符
column.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
modifier.size { |it| it.createSize(it.fromInt(200), it.fromInt(100)) }
end
column.setContent do |columnSlot|
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText("Hello")
end
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText(name)
end
end
end
end
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create do |slot|
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end
# 启动一个Activity用于显示脚本界面
$activity.start()
请注意，如果指定的尺寸不符合来自布局父项的约束条件，则可能不会采用该尺寸。如果您希望可组合项的尺寸固定不变，而不考虑传入的约束条件，请使用 requiredSize 修饰符：
import com.m8test.script.GlobalVariables.*
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private fun Greeting(slot: Slot<out Modifier>, name: String) {
slot.Column {
// 设置 Column 的修饰符
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setRed(255) }, { shapes -> shapes.getRectangleShape() })
size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
setContent {
Text {
// 设置 Text 组件显示的文本
setText("Hello")
}
Text {
// 设置 Text 组件显示的文本
setText(name)
}
}
}
}
fun side1Run() {
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(this, "M8Test")
}
// 启动一个Activity用于显示脚本界面
_activity.start()
}
//-m8test-remove side1Run();
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private static def Greeting(Slot<? extends Modifier> slot, String name) {
slot.Column { column ->
// 设置 Column 的修饰符
column.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setRed(255) }, { shapes -> shapes.getRectangleShape() })
modifier.size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
column.setContent { columnSlot ->
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText("Hello")
}
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText(name)
text.setModifier { modifier ->
modifier.requiredSize { it.createSize(it.fromInt(150), it.fromInt(150)) }
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setBlue(255) }, { shapes -> shapes.getRectangleShape() })
}
}
}
}
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create { slot ->
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
}
// 启动一个Activity用于显示脚本界面
$activity.start()
/**
* 垂直方向上显示两个文本组件
* @param {Packages.com.m8test.script.core.api.ui.compose.slot.Slot<Packages.com.m8test.script.core.api.ui.compose.modifier.Modifier>} slot
* @param {string} name
*/
function Greeting(slot, name) {
slot.Column(column => {
// 设置 Column 的修饰符
column.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setRed(255), shapes => shapes.getRectangleShape());
modifier.size(it => it.createSize(it.fromInt(200), it.fromInt(100)));
});
column.setContent(columnSlot => {
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText("Hello");
});
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText(name);
text.setModifier(modifier => {
modifier.requiredSize(it => it.createSize(it.fromInt(150), it.fromInt(150)));
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setBlue(255), shapes => shapes.getRectangleShape());
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create(slot => {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test");
});
// 启动一个Activity用于显示脚本界面
$activity.start();
-- 垂直方向上显示两个文本组件
local function Greeting(slot, name)
slot:Column(function(column)
-- 设置 Column 的修饰符
column:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
modifier:size(function(it) return it:createSize(it:fromInt(200), it:fromInt(100)) end)
end)
column:setContent(function(columnSlot)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText("Hello")
end)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText(name)
text:setModifier(function(modifier)
modifier:requiredSize(function(it) return it:createSize(it:fromInt(150), it:fromInt(150)) end)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setBlue(255) end, function(shapes) return shapes:getRectangleShape() end)
end)
end)
end)
end)
end
-- 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView:create(function(slot)
-- 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end)
-- 启动一个Activity用于显示脚本界面
_activity:start()
<?php
use m8test_java\com\m8test\script\core\api\ui\compose\modifier\Modifier;
use m8test_java\com\m8test\script\core\api\ui\compose\slot\Slot;
/** @var m8test_java\com\m8test\script\core\api\ui\compose\ComposeView $composeView */
global $composeView;
/** @var m8test_java\com\m8test\script\core\api\ui\Activity $activity */
global $activity;
// 垂直方向上显示两个文本组件
/** @param Slot $slot */
function Greeting($slot, string $name)
{
$slot->Column(function ($column) use ($name) {
// 设置 Column 的修饰符
$column->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
$modifier->size(function ($it) {
return $it->createSize($it->fromInt(200), $it->fromInt(100));
});
});
$column->setContent(function ($columnSlot) use ($name) {
$columnSlot->Text(function ($text) {
// 设置 Text 组件显示的文本
$text->setText(javaString("Hello"));
});
$columnSlot->Text(function ($text) use ($name) {
// 设置 Text 组件显示的文本
$text->setText($name);
$text->setModifier(function ($modifier) {
$modifier->requiredSize(function ($it) {
return $it->createSize($it->fromInt(150), $it->fromInt(150));
});
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setBlue(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView->create(function ($slot) {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting($slot, javaString("M8Test"));
});
// 启动一个Activity用于显示脚本界面
$activity->start();
# 导入所需的全局变量
from m8test_java.com.m8test.script.GlobalVariables import _composeView
from m8test_java.com.m8test.script.GlobalVariables import _activity
# 导入所需的Java类
from m8test_java.com.m8test.script.core.api.ui.compose.modifier.Modifier import Modifier
from m8test_java.com.m8test.script.core.api.ui.compose.slot.Slot import Slot
# 垂直方向上显示两个文本组件
def Greeting(slot: Slot, name: str):
slot.Column(lambda column: (
# 设置 Column 的修饰符
column.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda it: it.setRed(255), lambda shapes: shapes.getRectangleShape()),
modifier.size(lambda it: it.createSize(it.fromInt(200), it.fromInt(100)))
)),
column.setContent(lambda columnSlot: (
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText("Hello")
)),
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText(name),
text.setModifier(lambda modifier: (
modifier.requiredSize(lambda it: it.createSize(it.fromInt(150), it.fromInt(150))),
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda it: it.setBlue(255), lambda shapes: shapes.getRectangleShape())
))
))
))
))
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create(lambda slot: (
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
))
# 启动一个Activity用于显示脚本界面
_activity.start()
# encoding: utf-8
# 垂直方向上显示两个文本组件
def Greeting(slot, name)
slot.Column do |column|
# 设置 Column 的修饰符
column.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
modifier.size { |it| it.createSize(it.fromInt(200), it.fromInt(100)) }
end
column.setContent do |columnSlot|
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText("Hello")
end
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText(name)
text.setModifier do |modifier|
modifier.requiredSize { |it| it.createSize(it.fromInt(150), it.fromInt(150)) }
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setBlue(255) }, lambda { |shapes| shapes.getRectangleShape() })
end
end
end
end
end
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create do |slot|
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end
# 启动一个Activity用于显示脚本界面
$activity.start()
在此示例中，即使父项的 height 设置为 100.dp，Text 的高度还是 150.dp，因为 requiredSize 修饰符优先级较高。
如果您希望子布局填充父项允许的所有可用高度，请添加 fillMaxHeight 修饰符（Compose 还提供了 fillMaxSize 和 fillMaxWidth）：
import com.m8test.script.GlobalVariables.*
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private fun Greeting(slot: Slot<out Modifier>, name: String) {
slot.Column {
// 设置 Column 的修饰符
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setRed(255) }, { shapes -> shapes.getRectangleShape() })
size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
setContent {
Text {
// 设置 Text 组件显示的文本
setText("Hello")
}
Text {
// 设置 Text 组件显示的文本
setText(name)
setModifier {
fillMaxHeight(1.0f)
// 这里加个背景色是为了更好的展示效果
background({ setBlue(255) }, { shapes -> shapes.getRectangleShape() })
}
}
}
}
}
fun side1Run() {
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(this, "M8Test")
}
// 启动一个Activity用于显示脚本界面
_activity.start()
}
//-m8test-remove side1Run();
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private static def Greeting(Slot<? extends Modifier> slot, String name) {
slot.Column { column ->
// 设置 Column 的修饰符
column.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setRed(255) }, { shapes -> shapes.getRectangleShape() })
modifier.size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
column.setContent { columnSlot ->
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText("Hello")
}
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText(name)
text.setModifier { modifier ->
modifier.fillMaxHeight(1.0f)
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setBlue(255) }, { shapes -> shapes.getRectangleShape() })
}
}
}
}
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create { slot ->
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
}
// 启动一个Activity用于显示脚本界面
$activity.start()
/**
* 垂直方向上显示两个文本组件
* @param {Packages.com.m8test.script.core.api.ui.compose.slot.Slot<Packages.com.m8test.script.core.api.ui.compose.modifier.Modifier>} slot
* @param {string} name
*/
function Greeting(slot, name) {
slot.Column(column => {
// 设置 Column 的修饰符
column.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setRed(255), shapes => shapes.getRectangleShape());
modifier.size(it => it.createSize(it.fromInt(200), it.fromInt(100)));
});
column.setContent(columnSlot => {
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText("Hello");
});
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText(name);
text.setModifier(modifier => {
modifier.fillMaxHeight(1.0);
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setBlue(255), shapes => shapes.getRectangleShape());
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create(slot => {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test");
});
// 启动一个Activity用于显示脚本界面
$activity.start();
-- 垂直方向上显示两个文本组件
local function Greeting(slot, name)
slot:Column(function(column)
-- 设置 Column 的修饰符
column:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
modifier:size(function(it) return it:createSize(it:fromInt(200), it:fromInt(100)) end)
end)
column:setContent(function(columnSlot)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText("Hello")
end)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText(name)
text:setModifier(function(modifier)
modifier:fillMaxHeight(1.0)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setBlue(255) end, function(shapes) return shapes:getRectangleShape() end)
end)
end)
end)
end)
end
-- 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView:create(function(slot)
-- 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end)
-- 启动一个Activity用于显示脚本界面
_activity:start()
<?php
use m8test_java\com\m8test\script\core\api\ui\compose\modifier\Modifier;
use m8test_java\com\m8test\script\core\api\ui\compose\slot\Slot;
/** @var m8test_java\com\m8test\script\core\api\ui\compose\ComposeView $composeView */
global $composeView;
/** @var m8test_java\com\m8test\script\core\api\ui\Activity $activity */
global $activity;
// 垂直方向上显示两个文本组件
/** @param Slot $slot */
function Greeting($slot, string $name)
{
$slot->Column(function ($column) use ($name) {
// 设置 Column 的修饰符
$column->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
$modifier->size(function ($it) {
return $it->createSize($it->fromInt(200), $it->fromInt(100));
});
});
$column->setContent(function ($columnSlot) use ($name) {
$columnSlot->Text(function ($text) {
// 设置 Text 组件显示的文本
$text->setText(javaString("Hello"));
});
$columnSlot->Text(function ($text) use ($name) {
// 设置 Text 组件显示的文本
$text->setText($name);
$text->setModifier(function ($modifier) {
$modifier->fillMaxHeight(1.0);
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setBlue(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView->create(function ($slot) {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting($slot, javaString("M8Test"));
});
// 启动一个Activity用于显示脚本界面
$activity->start();
# 导入所需的全局变量
from m8test_java.com.m8test.script.GlobalVariables import _composeView
from m8test_java.com.m8test.script.GlobalVariables import _activity
# 导入所需的Java类
from m8test_java.com.m8test.script.core.api.ui.compose.modifier.Modifier import Modifier
from m8test_java.com.m8test.script.core.api.ui.compose.slot.Slot import Slot
# 垂直方向上显示两个文本组件
def Greeting(slot: Slot, name: str):
slot.Column(lambda column: (
# 设置 Column 的修饰符
column.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda it: it.setRed(255), lambda shapes: shapes.getRectangleShape()),
modifier.size(lambda it: it.createSize(it.fromInt(200), it.fromInt(100)))
)),
column.setContent(lambda columnSlot: (
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText("Hello")
)),
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText(name),
text.setModifier(lambda modifier: (
# Groovy的 1.0f 在Python中就是 1.0
modifier.fillMaxHeight(1.0),
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda it: it.setBlue(255), lambda shapes: shapes.getRectangleShape())
))
))
))
))
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create(lambda slot: (
# 插槽（Slot）是一种内容分-发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
))
# 启动一个Activity用于显示脚本界面
_activity.start()
# encoding: utf-8
# 垂直方向上显示两个文本组件
def Greeting(slot, name)
slot.Column do |column|
# 设置 Column 的修饰符
column.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
modifier.size { |it| it.createSize(it.fromInt(200), it.fromInt(100)) }
end
column.setContent do |columnSlot|
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText("Hello")
end
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText(name)
text.setModifier do |modifier|
modifier.fillMaxHeight(1.0)
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setBlue(255) }, lambda { |shapes| shapes.getRectangleShape() })
end
end
end
end
end
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create do |slot|
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end
# 启动一个Activity用于显示脚本界面
$activity.start()
如需在整个元素周围全添加内边距，请设置 padding 修饰符。
如需在文本基线上方添加内边距，以实现从布局顶部到基线保持特定距离，请使用 paddingFromBaseline 修饰符：
import com.m8test.script.GlobalVariables.*
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private fun Greeting(slot: Slot<out Modifier>, name: String) {
slot.Column {
// 设置 Column 的修饰符
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setRed(255) }, { shapes -> shapes.getRectangleShape() })
size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
setContent {
Text {
// 设置 Text 组件显示的文本
setText("Hello")
}
Text {
// 设置 Text 组件显示的文本
setText(name)
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setBlue(255) }, { shapes -> shapes.getRectangleShape() })
.paddingFromBaseline({ it.fromInt(50) }, { it.fromInt(0) })
}
}
}
}
}
fun side1Run() {
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(this, "M8Test")
}
// 启动一个Activity用于显示脚本界面
_activity.start()
}
//-m8test-remove side1Run();
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private static def Greeting(Slot<? extends Modifier> slot, String name) {
slot.Column { column ->
// 设置 Column 的修饰符
column.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setRed(255) }, { shapes -> shapes.getRectangleShape() })
modifier.size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
column.setContent { columnSlot ->
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText("Hello")
}
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText(name)
text.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setBlue(255) }, { shapes -> shapes.getRectangleShape() })
.paddingFromBaseline({ it.fromInt(50) }, { it.fromInt(0) })
}
}
}
}
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create { slot ->
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
}
// 启动一个Activity用于显示脚本界面
$activity.start()
/**
* 垂直方向上显示两个文本组件
* @param {Packages.com.m8test.script.core.api.ui.compose.slot.Slot<Packages.com.m8test.script.core.api.ui.compose.modifier.Modifier>} slot
* @param {string} name
*/
function Greeting(slot, name) {
slot.Column(column => {
// 设置 Column 的修饰符
column.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setRed(255), shapes => shapes.getRectangleShape());
modifier.size(it => it.createSize(it.fromInt(200), it.fromInt(100)));
});
column.setContent(columnSlot => {
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText("Hello");
});
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText(name);
text.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setBlue(255), shapes => shapes.getRectangleShape())
.paddingFromBaseline(it => it.fromInt(50), it => it.fromInt(0));
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create(slot => {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test");
});
// 启动一个Activity用于显示脚本界面
$activity.start();
-- groovy import 在 lua 中不需要
-- import com.m8test.script.core.api.ui.compose.modifier.Modifier
-- import com.m8test.script.core.api.ui.compose.slot.Slot
-- 垂直方向上显示两个文本组件
local function Greeting(slot, name)
slot:Column(function(column)
-- 设置 Column 的修饰符
column:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
modifier:size(function(it) return it:createSize(it:fromInt(200), it:fromInt(100)) end)
end)
column:setContent(function(columnSlot)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText("Hello")
end)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText(name)
text:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setBlue(255) end, function(shapes) return shapes:getRectangleShape() end)
:paddingFromBaseline(function(it) return it:fromInt(50) end, function(it) return it:fromInt(0) end)
end)
end)
end)
end)
end
-- 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView:create(function(slot)
-- 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end)
-- 启动一个Activity用于显示脚本界面
_activity:start()
<?php
use m8test_java\com\m8test\script\core\api\ui\compose\modifier\Modifier;
use m8test_java\com\m8test\script\core\api\ui\compose\slot\Slot;
/** @var m8test_java\com\m8test\script\core\api\ui\compose\ComposeView $composeView */
global $composeView;
/** @var m8test_java\com\m8test\script\core\api\ui\Activity $activity */
global $activity;
// 垂直方向上显示两个文本组件
/** @param Slot $slot */
function Greeting($slot, string $name)
{
$slot->Column(function ($column) use ($name) {
// 设置 Column 的修饰符
$column->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
$modifier->size(function ($it) {
return $it->createSize($it->fromInt(200), $it->fromInt(100));
});
});
$column->setContent(function ($columnSlot) use ($name) {
$columnSlot->Text(function ($text) {
// 设置 Text 组件显示的文本
$text->setText(javaString("Hello"));
});
$columnSlot->Text(function ($text) use ($name) {
// 设置 Text 组件显示的文本
$text->setText($name);
$text->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setBlue(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
)->paddingFromBaseline(
function ($it) { return $it->fromInt(50); },
function ($it) { return $it->fromInt(0); }
);
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView->create(function ($slot) {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting($slot, javaString("M8Test"));
});
// 启动一个Activity用于显示脚本界面
$activity->start();
# 导入所需的全局变量
from m8test_java.com.m8test.script.GlobalVariables import _composeView
from m8test_java.com.m8test.script.GlobalVariables import _activity
# 导入所需的Java类
from m8test_java.com.m8test.script.core.api.ui.compose.modifier.Modifier import Modifier
from m8test_java.com.m8test.script.core.api.ui.compose.slot.Slot import Slot
# 垂直方向上显示两个文本组件
def Greeting(slot: Slot, name: str):
slot.Column(lambda column: (
# 设置 Column 的修饰符
column.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda it: it.setRed(255), lambda shapes: shapes.getRectangleShape()),
modifier.size(lambda it: it.createSize(it.fromInt(200), it.fromInt(100)))
)),
column.setContent(lambda columnSlot: (
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText("Hello")
)),
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText(name),
text.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
# 链式调用在Python中可以直接转换，因为它本身是一个单一的表达式
modifier.background(lambda it: it.setBlue(255), lambda shapes: shapes.getRectangleShape())
.paddingFromBaseline(lambda it: it.fromInt(50), lambda it: it.fromInt(0))
))
))
))
))
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create(lambda slot: (
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
))
# 启动一个Activity用于显示脚本界面
_activity.start()
# encoding: utf-8
# 垂直方向上显示两个文本组件
def Greeting(slot, name)
slot.Column do |column|
# 设置 Column 的修饰符
column.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
modifier.size { |it| it.createSize(it.fromInt(200), it.fromInt(100)) }
end
column.setContent do |columnSlot|
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText("Hello")
end
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText(name)
text.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setBlue(255) }, lambda { |shapes| shapes.getRectangleShape() })
.paddingFromBaseline(lambda { |it| it.fromInt(50) }, lambda { |it| it.fromInt(0) })
end
end
end
end
end
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create do |slot|
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end
# 启动一个Activity用于显示脚本界面
$activity.start()
偏移
如需相对于原始位置放置布局，请添加 offset 修饰符，并设置在 x 轴和 y 轴的偏移量。偏移量可以是正数，也可以是非正数。padding 和 offset 之间的区别在于，向可组合项添加 offset 不会改变其测量结果：
import com.m8test.script.GlobalVariables.*
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private fun Greeting(slot: Slot<out Modifier>, name: String) {
slot.Column {
// 设置 Column 的修饰符
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setRed(255) }, { shapes -> shapes.getRectangleShape() })
size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
setContent {
Text {
// 设置 Text 组件显示的文本
setText("Hello")
}
Text {
// 设置 Text 组件显示的文本
setText(name)
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setBlue(255) }, { shapes -> shapes.getRectangleShape() })
.offset { it.createOffset(it.fromInt(10), it.fromInt(0)) }
}
}
}
}
}
fun side1Run() {
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(this, "M8Test")
}
// 启动一个Activity用于显示脚本界面
_activity.start()
}
//-m8test-remove side1Run();
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private static def Greeting(Slot<? extends Modifier> slot, String name) {
slot.Column { column ->
// 设置 Column 的修饰符
column.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setRed(255) }, { shapes -> shapes.getRectangleShape() })
modifier.size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
column.setContent { columnSlot ->
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText("Hello")
}
columnSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText(name)
text.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setBlue(255) }, { shapes -> shapes.getRectangleShape() })
.offset { it.createOffset(it.fromInt(10), it.fromInt(0)) }
}
}
}
}
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create { slot ->
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
}
// 启动一个Activity用于显示脚本界面
$activity.start()
/**
* @param {Packages.com.m8test.script.core.api.ui.compose.slot.Slot<Packages.com.m8test.script.core.api.ui.compose.modifier.Modifier>} slot
* @param {string} name
*/
function Greeting(slot, name) {
// 垂直方向上显示两个文本组件
slot.Column(column => {
// 设置 Column 的修饰符
column.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setRed(255), shapes => shapes.getRectangleShape());
modifier.size(it => it.createSize(it.fromInt(200), it.fromInt(100)));
});
column.setContent(columnSlot => {
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText("Hello");
});
columnSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText(name);
text.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setBlue(255), shapes => shapes.getRectangleShape())
.offset(it => it.createOffset(it.fromInt(10), it.fromInt(0)));
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create(slot => {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test");
});
// 启动一个Activity用于显示脚本界面
$activity.start();
-- import com.m8test.script.core.api.ui.compose.modifier.Modifier
-- import com.m8test.script.core.api.ui.compose.slot.Slot
-- 垂直方向上显示两个文本组件
local function Greeting(slot, name)
slot:Column(function(column)
-- 设置 Column 的修饰符
column:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
modifier:size(function(it) return it:createSize(it:fromInt(200), it:fromInt(100)) end)
end)
column:setContent(function(columnSlot)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText("Hello")
end)
columnSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText(name)
text:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setBlue(255) end, function(shapes) return shapes:getRectangleShape() end)
:offset(function(it) return it:createOffset(it:fromInt(10), it:fromInt(0)) end)
end)
end)
end)
end)
end
-- 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView:create(function(slot)
-- 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end)
-- 启动一个Activity用于显示脚本界面
_activity:start()
<?php
use m8test_java\com\m8test\script\core\api\ui\compose\modifier\Modifier;
use m8test_java\com\m8test\script\core\api\ui\compose\slot\Slot;
/** @var m8test_java\com\m8test\script\core\api\ui\compose\ComposeView $composeView */
global $composeView;
/** @var m8test_java\com\m8test\script\core\api\ui\Activity $activity */
global $activity;
// 垂直方向上显示两个文本组件
/** @param Slot $slot */
function Greeting($slot, string $name)
{
$slot->Column(function ($column) use ($name) {
// 设置 Column 的修饰符
$column->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
$modifier->size(function ($it) {
return $it->createSize($it->fromInt(200), $it->fromInt(100));
});
});
$column->setContent(function ($columnSlot) use ($name) {
$columnSlot->Text(function ($text) {
// 设置 Text 组件显示的文本
$text->setText(javaString("Hello"));
});
$columnSlot->Text(function ($text) use ($name) {
// 设置 Text 组件显示的文本
$text->setText($name);
$text->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setBlue(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
)->offset(function ($it) {
return $it->createOffset($it->fromInt(10), $it->fromInt(0));
});
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView->create(function ($slot) {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting($slot, javaString("M8Test"));
});
// 启动一个Activity用于显示脚本界面
$activity->start();
# 导入所需的全局变量
from m8test_java.com.m8test.script.GlobalVariables import _composeView
from m8test_java.com.m8test.script.GlobalVariables import _activity
# 导入所需的Java类
from m8test_java.com.m8test.script.core.api.ui.compose.modifier.Modifier import Modifier
from m8test_java.com.m8test.script.core.api.ui.compose.slot.Slot import Slot
# 垂直方向上显示两个文本组件
def Greeting(slot: Slot, name: str):
slot.Column(lambda column: (
# 设置 Column 的修饰符
column.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda it: it.setRed(255), lambda shapes: shapes.getRectangleShape()),
modifier.size(lambda it: it.createSize(it.fromInt(200), it.fromInt(100)))
)),
column.setContent(lambda columnSlot: (
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText("Hello")
)),
columnSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText(name),
text.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
# 链式调用在lambda中是一个单一表达式，所以不需要元组
modifier.background(lambda it: it.setBlue(255), lambda shapes: shapes.getRectangleShape())
.offset(lambda it: it.createOffset(it.fromInt(10), it.fromInt(0)))
))
))
))
))
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create(lambda slot: (
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
))
# 启动一个Activity用于显示脚本界面
_activity.start()
# encoding: utf-8
# 垂直方向上显示两个文本组件
def Greeting(slot, name)
slot.Column do |column|
# 设置 Column 的修饰符
column.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
modifier.size { |it| it.createSize(it.fromInt(200), it.fromInt(100)) }
end
column.setContent do |columnSlot|
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText("Hello")
end
columnSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText(name)
text.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setBlue(255) }, lambda { |shapes| shapes.getRectangleShape() })
.offset { |it| it.createOffset(it.fromInt(10), it.fromInt(0)) }
end
end
end
end
end
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create do |slot|
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end
# 启动一个Activity用于显示脚本界面
$activity.start()
offset 修饰符根据布局方向水平应用。在从左到右的上下文中，正 offset 会将元素向右移，而在从右到左的上下文中，它会将元素向左移。如果您需要设置偏移量，而不考虑布局方向，请参阅 absoluteOffset 修饰符，该修饰符中的正偏移值一律会将元素向右移。
Compose 中的作用域安全
在 Compose 中，有一些修饰符只能应用于某些可组合项的子项。Compose 通过自定义作用域强制实施此安全机制。
例如，如果您希望使某个子项与父项 Box 同样大，而不影响 Box 尺寸，请使用 matchParentSize 修饰符。matchParentSize 仅适用于 BoxScope，因此只能对 Box 父级中的子级使用。
作用域安全机制可防止您添加在其他可组合项和作用域中不起作用的修饰符，还可节省试错的时间。
限定作用域的修饰符会将父项应知晓的关于子项的一些信息告知父项。这些修饰符通常称为“父项数据修饰符”。它们的内部构件与通用修饰符不同，但从使用角度来看，这些差异并不重要。
matchParentSize（在 Box 中）
如上所述，如果您希望子布局与父项 Box 尺寸相同而不影响 Box 的尺寸，请使用 matchParentSize 修饰符。
请注意，matchParentSize 仅在 Box 作用域内可用，这意味着它仅适用于 Box 可组合项的直接子项。
在以下示例中，子项 Spacer 从其父项 Box 获取自己的尺寸，在这种情况下，后者又会从其最大的子项 ArtistCard 中获取自己的尺寸。
import com.m8test.script.GlobalVariables.*
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private fun Greeting(slot: Slot<out Modifier>, name: String) {
slot.Box {
// 设置 Box 的修饰符
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setRed(255) }, { shapes -> shapes.getRectangleShape() })
}
setContent {
Spacer {
setModifier {
matchParentSize()
background({ setBlue(255) }, { shapes -> shapes.getRectangleShape() })
}
}
Text {
// 设置 Text 组件显示的文本
setText(name)
setModifier {
size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
}
}
}
}
fun side1Run() {
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(this, "M8Test")
}
// 启动一个Activity用于显示脚本界面
_activity.start()
}
//-m8test-remove side1Run();
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private static def Greeting(Slot<? extends Modifier> slot, String name) {
slot.Box { box ->
// 设置 Box 的修饰符
box.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setRed(255) }, { shapes -> shapes.getRectangleShape() })
}
box.setContent { boxSlot ->
boxSlot.Spacer { spacer ->
spacer.setModifier { modifier ->
modifier.matchParentSize()
modifier.background({ it.setBlue(255) }, { shapes -> shapes.getRectangleShape() })
}
}
boxSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText(name)
text.setModifier { modifier ->
modifier.size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
}
}
}
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create { slot ->
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
}
// 启动一个Activity用于显示脚本界面
$activity.start()
/**
* 垂直方向上显示两个文本组件
* @param {Packages.com.m8test.script.core.api.ui.compose.slot.Slot<Packages.com.m8test.script.core.api.ui.compose.modifier.Modifier>} slot
* @param {string} name
*/
function Greeting(slot, name) {
slot.Box(box => {
// 设置 Box 的修饰符
box.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setRed(255), shapes => shapes.getRectangleShape());
});
box.setContent(boxSlot => {
boxSlot.Spacer(spacer => {
spacer.setModifier(modifier => {
modifier.matchParentSize();
modifier.background(it => it.setBlue(255), shapes => shapes.getRectangleShape());
});
});
boxSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText(name);
text.setModifier(modifier => {
modifier.size(it => it.createSize(it.fromInt(200), it.fromInt(100)));
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create(slot => {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test");
});
// 启动一个Activity用于显示脚本界面
$activity.start();
-- 垂直方向上显示两个文本组件
local function Greeting(slot, name)
slot:Box(function(box)
-- 设置 Box 的修饰符
box:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
end)
box:setContent(function(boxSlot)
boxSlot:Spacer(function(spacer)
spacer:setModifier(function(modifier)
modifier:matchParentSize()
modifier:background(function(it) it:setBlue(255) end, function(shapes) return shapes:getRectangleShape() end)
end)
end)
boxSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText(name)
text:setModifier(function(modifier)
modifier:size(function(it) return it:createSize(it:fromInt(200), it:fromInt(100)) end)
end)
end)
end)
end)
end
-- 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView:create(function(slot)
-- 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end)
-- 启动一个Activity用于显示脚本界面
_activity:start()
<?php
use m8test_java\com\m8test\script\core\api\ui\compose\modifier\Modifier;
use m8test_java\com\m8test\script\core\api\ui\compose\slot\Slot;
/** @var m8test_java\com\m8test\script\core\api\ui\compose\ComposeView $composeView */
global $composeView;
/** @var m8test_java\com\m8test\script\core\api\ui\Activity $activity */
global $activity;
// 垂直方向上显示两个文本组件
/** @param Slot $slot */
function Greeting($slot, string $name)
{
$slot->Box(function ($box) use ($name) {
// 设置 Box 的修饰符
$box->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
});
$box->setContent(function ($boxSlot) use ($name) {
$boxSlot->Spacer(function ($spacer) {
$spacer->setModifier(function ($modifier) {
$modifier->matchParentSize();
$modifier->background(
function ($it) { $it->setBlue(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
});
});
$boxSlot->Text(function ($text) use ($name) {
// 设置 Text 组件显示的文本
$text->setText($name);
$text->setModifier(function ($modifier) {
$modifier->size(function ($it) {
return $it->createSize($it->fromInt(200), $it->fromInt(100));
});
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView->create(function ($slot) {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting($slot, javaString("M8Test"));
});
// 启动一个Activity用于显示脚本界面
$activity->start();
# 导入所需的全局变量
from m8test_java.com.m8test.script.GlobalVariables import _activity
from m8test_java.com.m8test.script.GlobalVariables import _composeView
# 导入所需的Java类
from m8test_java.com.m8test.script.core.api.ui.compose.slot.Slot import Slot
# 垂直方向上显示两个文本组件
def Greeting(slot: Slot, name: str):
slot.Box(lambda box: (
# 设置 Box 的修饰符
box.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda it: it.setRed(255), lambda shapes: shapes.getRectangleShape())
)),
box.setContent(lambda boxSlot: (
boxSlot.Spacer(lambda spacer: (
spacer.setModifier(lambda modifier: (
modifier.matchParentSize(),
modifier.background(lambda it: it.setBlue(255), lambda shapes: shapes.getRectangleShape())
))
)),
boxSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText(name),
text.setModifier(lambda modifier: (
modifier.size(lambda it: it.createSize(it.fromInt(200), it.fromInt(100)))
))
))
))
))
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create(lambda slot: (
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
))
# 启动一个Activity用于显示脚本界面
_activity.start()
# encoding: utf-8
# 垂直方向上显示两个文本组件
def Greeting(slot, name)
slot.Box do |box|
# 设置 Box 的修饰符
box.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
end
box.setContent do |boxSlot|
boxSlot.Spacer do |spacer|
spacer.setModifier do |modifier|
modifier.matchParentSize()
modifier.background(lambda { |it| it.setBlue(255) }, lambda { |shapes| shapes.getRectangleShape() })
end
end
boxSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText(name)
text.setModifier do |modifier|
modifier.size { |it| it.createSize(it.fromInt(200), it.fromInt(100)) }
end
end
end
end
end
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create do |slot|
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end
# 启动一个Activity用于显示脚本界面
$activity.start()
如果使用 fillMaxSize 代替 matchParentSize，Spacer 将占用父项允许的所有可用空间，反过来使父项展开并填满所有可用空间。
import com.m8test.script.GlobalVariables.*
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private fun Greeting(slot: Slot<out Modifier>, name: String) {
slot.Box {
// 设置 Box 的修饰符
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setRed(255) }, { shapes -> shapes.getRectangleShape() })
}
setContent {
Spacer {
setModifier {
fillMaxSize(1.0f)
background({ setBlue(255) }, { shapes -> shapes.getRectangleShape() })
}
}
Text {
// 设置 Text 组件显示的文本
setText(name)
setModifier {
size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
}
}
}
}
fun side1Run() {
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(this, "M8Test")
}
// 启动一个Activity用于显示脚本界面
_activity.start()
}
//-m8test-remove side1Run();
import com.m8test.script.core.api.ui.compose.modifier.Modifier
import com.m8test.script.core.api.ui.compose.slot.Slot
// 垂直方向上显示两个文本组件
private static def Greeting(Slot<? extends Modifier> slot, String name) {
slot.Box { box ->
// 设置 Box 的修饰符
box.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setRed(255) }, { shapes -> shapes.getRectangleShape() })
}
box.setContent { boxSlot ->
boxSlot.Spacer { spacer ->
spacer.setModifier { modifier ->
modifier.fillMaxSize(1.0f)
modifier.background({ it.setBlue(255) }, { shapes -> shapes.getRectangleShape() })
}
}
boxSlot.Text { text ->
// 设置 Text 组件显示的文本
text.setText(name)
text.setModifier { modifier ->
modifier.size { it.createSize(it.fromInt(200), it.fromInt(100)) }
}
}
}
}
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create { slot ->
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
}
// 启动一个Activity用于显示脚本界面
$activity.start()
/**
* 垂直方向上显示两个文本组件
* @param {Packages.com.m8test.script.core.api.ui.compose.slot.Slot<Packages.com.m8test.script.core.api.ui.compose.modifier.Modifier>} slot
* @param {string} name
*/
function Greeting(slot, name) {
slot.Box(box => {
// 设置 Box 的修饰符
box.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setRed(255), shapes => shapes.getRectangleShape());
});
box.setContent(boxSlot => {
boxSlot.Spacer(spacer => {
spacer.setModifier(modifier => {
modifier.fillMaxSize(1.0);
modifier.background(it => it.setBlue(255), shapes => shapes.getRectangleShape());
});
});
boxSlot.Text(text => {
// 设置 Text 组件显示的文本
text.setText(name);
text.setModifier(modifier => {
modifier.size(it => it.createSize(it.fromInt(200), it.fromInt(100)));
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create(slot => {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test");
});
// 启动一个Activity用于显示脚本界面
$activity.start();
-- import com.m8test.script.core.api.ui.compose.modifier.Modifier
-- import com.m8test.script.core.api.ui.compose.slot.Slot
-- (在 Lua 中，通常不需要像 Groovy/Java 那样显式 import 类型，它们通过 require 机制或由宿主环境提供)
-- 垂直方向上显示两个文本组件
local function Greeting(slot, name)
slot:Box(function(box)
-- 设置 Box 的修饰符
box:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
end)
box:setContent(function(boxSlot)
boxSlot:Spacer(function(spacer)
spacer:setModifier(function(modifier)
modifier:fillMaxSize(1.0)
modifier:background(function(it) it:setBlue(255) end, function(shapes) return shapes:getRectangleShape() end)
end)
end)
boxSlot:Text(function(text)
-- 设置 Text 组件显示的文本
text:setText(name)
text:setModifier(function(modifier)
modifier:size(function(it) return it:createSize(it:fromInt(200), it:fromInt(100)) end)
end)
end)
end)
end)
end
-- 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView:create(function(slot)
-- 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end)
-- 启动一个Activity用于显示脚本界面
_activity:start()
<?php
use m8test_java\com\m8test\script\core\api\ui\compose\modifier\Modifier;
use m8test_java\com\m8test\script\core\api\ui\compose\slot\Slot;
/** @var m8test_java\com\m8test\script\core\api\ui\compose\ComposeView $composeView */
global $composeView;
/** @var m8test_java\com\m8test\script\core\api\ui\Activity $activity */
global $activity;
// 垂直方向上显示两个文本组件
/** @param Slot $slot */
function Greeting($slot, string $name)
{
$slot->Box(function ($box) use ($name) {
// 设置 Box 的修饰符
$box->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
});
$box->setContent(function ($boxSlot) use ($name) {
$boxSlot->Spacer(function ($spacer) {
$spacer->setModifier(function ($modifier) {
$modifier->fillMaxSize(1.0);
$modifier->background(
function ($it) { $it->setBlue(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
});
});
$boxSlot->Text(function ($text) use ($name) {
// 设置 Text 组件显示的文本
$text->setText($name);
$text->setModifier(function ($modifier) {
$modifier->size(function ($it) {
return $it->createSize($it->fromInt(200), $it->fromInt(100));
});
});
});
});
});
}
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView->create(function ($slot) {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting($slot, javaString("M8Test"));
});
// 启动一个Activity用于显示脚本界面
$activity->start();
# 导入所需的全局变量
from m8test_java.com.m8test.script.GlobalVariables import _composeView
from m8test_java.com.m8test.script.GlobalVariables import _activity
# 导入所需的Java类
from m8test_java.com.m8test.script.core.api.ui.compose.modifier.Modifier import Modifier
from m8test_java.com.m8test.script.core.api.ui.compose.slot.Slot import Slot
# 垂直方向上显示两个文本组件
def Greeting(slot: Slot, name: str):
slot.Box(lambda box: (
# 设置 Box 的修饰符
box.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda it: it.setRed(255), lambda shapes: shapes.getRectangleShape())
)),
box.setContent(lambda boxSlot: (
boxSlot.Spacer(lambda spacer: (
spacer.setModifier(lambda modifier: (
# Groovy的 1.0f 对应 Python 的 1.0
modifier.fillMaxSize(1.0),
modifier.background(lambda it: it.setBlue(255), lambda shapes: shapes.getRectangleShape())
))
)),
boxSlot.Text(lambda text: (
# 设置 Text 组件显示的文本
text.setText(name),
text.setModifier(lambda modifier: (
modifier.size(lambda it: it.createSize(it.fromInt(200), it.fromInt(100)))
))
))
))
))
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create(lambda slot: (
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
))
# 启动一个Activity用于显示脚本界面
_activity.start()
# encoding: utf-8
# 垂直方向上显示两个文本组件
def Greeting(slot, name)
slot.Box do |box|
# 设置 Box 的修饰符
box.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
end
box.setContent do |boxSlot|
boxSlot.Spacer do |spacer|
spacer.setModifier do |modifier|
modifier.fillMaxSize(1.0)
modifier.background(lambda { |it| it.setBlue(255) }, lambda { |shapes| shapes.getRectangleShape() })
end
end
boxSlot.Text do |text|
# 设置 Text 组件显示的文本
text.setText(name)
text.setModifier do |modifier|
modifier.size { |it| it.createSize(it.fromInt(200), it.fromInt(100)) }
end
end
end
end
end
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create do |slot|
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Greeting(slot, "M8Test")
end
# 启动一个Activity用于显示脚本界面
$activity.start()
Row 和 Column 中的 weight
如前文的内边距和尺寸部分所述，默认情况下，可组合项的尺寸由其封装的内容定义。您可以使用仅可在 RowScope 和 ColumnScope 中使用的 weight 修饰符，将可组合项的尺寸设置为可在其父项内灵活调整。
让我们以包含两个 Box 可组合项的 Row 为例。第一个框的 weight 是第二个框的两倍，因此其宽度也相差两倍。由于 Row 的宽度为 210.dp，因此第一个 Box 的宽度为 140.dp，第二个的宽度为 70.dp：
import com.m8test.script.GlobalVariables.*
fun side1Run() {
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
Row {
// 设置 Row 的修饰符
setModifier {
// 这里加个背景色是为了更好的展示效果
background({ setRed(255) }, { shapes -> shapes.getRectangleShape() })
size { it.createSize(it.fromInt(210), it.fromInt(100)) }
}
setContent {
Box {
setModifier {
fillMaxHeight(1f)
weight(2.0f, true)
background({ setBlue(255) }, { shapes -> shapes.getRectangleShape() })
}
}
Box {
setModifier {
fillMaxHeight(1f)
weight(1.0f, true)
background({ setGreen(255) }, { shapes -> shapes.getRectangleShape() })
}
}
}
}
}
// 启动一个Activity用于显示脚本界面
_activity.start()
}
//-m8test-remove side1Run();
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create { slot ->
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
slot.Row { row ->
// 设置 Row 的修饰符
row.setModifier { modifier ->
// 这里加个背景色是为了更好的展示效果
modifier.background({ it.setRed(255) }, { shapes -> shapes.getRectangleShape() })
modifier.size { it.createSize(it.fromInt(210), it.fromInt(100)) }
}
row.setContent { rowSlot ->
rowSlot.Box { box ->
box.setModifier { modifier ->
modifier.fillMaxHeight(1f)
modifier.weight(2.0f, true)
modifier.background({ it.setBlue(255) }, { shapes -> shapes.getRectangleShape() })
}
}
rowSlot.Box { box ->
box.setModifier { modifier ->
modifier.fillMaxHeight(1f)
modifier.weight(1.0f, true)
modifier.background({ it.setGreen(255) }, { shapes -> shapes.getRectangleShape() })
}
}
}
}
}
// 启动一个Activity用于显示脚本界面
$activity.start()
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create(slot => {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
slot.Row(row => {
// 设置 Row 的修饰符
row.setModifier(modifier => {
// 这里加个背景色是为了更好的展示效果
modifier.background(it => it.setRed(255), shapes => shapes.getRectangleShape());
modifier.size(it => it.createSize(it.fromInt(210), it.fromInt(100)));
});
row.setContent(rowSlot => {
rowSlot.Box(box => {
box.setModifier(modifier => {
modifier.fillMaxHeight(1.0);
modifier.weight(2.0, true);
modifier.background(it => it.setBlue(255), shapes => shapes.getRectangleShape());
});
});
rowSlot.Box(box => {
box.setModifier(modifier => {
modifier.fillMaxHeight(1.0);
modifier.weight(1.0, true);
modifier.background(it => it.setGreen(255), shapes => shapes.getRectangleShape());
});
});
});
});
});
// 启动一个Activity用于显示脚本界面
$activity.start();
-- 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView:create(function(slot)
-- 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
slot:Row(function(row)
-- 设置 Row 的修饰符
row:setModifier(function(modifier)
-- 这里加个背景色是为了更好的展示效果
modifier:background(function(it) it:setRed(255) end, function(shapes) return shapes:getRectangleShape() end)
modifier:size(function(it) return it:createSize(it:fromInt(210), it:fromInt(100)) end)
end)
row:setContent(function(rowSlot)
rowSlot:Box(function(box)
box:setModifier(function(modifier)
modifier:fillMaxHeight(1.0)
modifier:weight(2.0, true)
modifier:background(function(it) it:setBlue(255) end, function(shapes) return shapes:getRectangleShape() end)
end)
end)
rowSlot:Box(function(box)
box:setModifier(function(modifier)
modifier:fillMaxHeight(1.0)
modifier:weight(1.0, true)
modifier:background(function(it) it:setGreen(255) end, function(shapes) return shapes:getRectangleShape() end)
end)
end)
end)
end)
end)
-- 启动一个Activity用于显示脚本界面
_activity:start()
<?php
/** @var m8test_java\com\m8test\script\core\api\ui\compose\ComposeView $composeView */
global $composeView;
/** @var m8test_java\com\m8test\script\core\api\ui\Activity $activity */
global $activity;
// 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView->create(function ($slot) {
// 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
$slot->Row(function ($row) {
// 设置 Row 的修饰符
$row->setModifier(function ($modifier) {
// 这里加个背景色是为了更好的展示效果
$modifier->background(
function ($it) { $it->setRed(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
$modifier->size(function ($it) {
return $it->createSize($it->fromInt(210), $it->fromInt(100));
});
});
$row->setContent(function ($rowSlot) {
$rowSlot->Box(function ($box) {
$box->setModifier(function ($modifier) {
$modifier->fillMaxHeight(1.0);
$modifier->weight(2.0, true);
$modifier->background(
function ($it) { $it->setBlue(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
});
});
$rowSlot->Box(function ($box) {
$box->setModifier(function ($modifier) {
$modifier->fillMaxHeight(1.0);
$modifier->weight(1.0, true);
$modifier->background(
function ($it) { $it->setGreen(255); },
function ($shapes) { return $shapes->getRectangleShape(); }
);
});
});
});
});
});
// 启动一个Activity用于显示脚本界面
$activity->start();
# 导入所需的全局变量
from m8test_java.com.m8test.script.GlobalVariables import _composeView
from m8test_java.com.m8test.script.GlobalVariables import _activity
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
_composeView.create(lambda slot: (
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
slot.Row(lambda row: (
# 设置 Row 的修uschina-pro修饰符
row.setModifier(lambda modifier: (
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda it: it.setRed(255), lambda shapes: shapes.getRectangleShape()),
modifier.size(lambda it: it.createSize(it.fromInt(210), it.fromInt(100)))
)),
row.setContent(lambda rowSlot: (
rowSlot.Box(lambda box: (
box.setModifier(lambda modifier: (
modifier.fillMaxHeight(1.0),
modifier.weight(2.0, True),
modifier.background(lambda it: it.setBlue(255), lambda shapes: shapes.getRectangleShape())
))
)),
rowSlot.Box(lambda box: (
box.setModifier(lambda modifier: (
modifier.fillMaxHeight(1.0),
modifier.weight(1.0, True),
modifier.background(lambda it: it.setGreen(255), lambda shapes: shapes.getRectangleShape())
))
))
))
))
))
# 启动一个Activity用于显示脚本界面
_activity.start()
# encoding: utf-8
# 创建一个 ComposeView, 可以通过声明式ui创建脚本界面
$composeView.create do |slot|
# 插槽（Slot）是一种内容分发机制。它允许你在封装一个通用组件时，在组件内部预留一些“坑位”或“插槽”，然后让使用该组件的父组件来决定这些“坑位”里到底填充什么内容。
slot.Row do |row|
# 设置 Row 的修饰符
row.setModifier do |modifier|
# 这里加个背景色是为了更好的展示效果
modifier.background(lambda { |it| it.setRed(255) }, lambda { |shapes| shapes.getRectangleShape() })
modifier.size { |it| it.createSize(it.fromInt(210), it.fromInt(100)) }
end
row.setContent do |rowSlot|
rowSlot.Box do |box|
box.setModifier do |modifier|
modifier.fillMaxHeight(1.0)
modifier.weight(2.0, true)
modifier.background(lambda { |it| it.setBlue(255) }, lambda { |shapes| shapes.getRectangleShape() })
end
end
rowSlot.Box do |box|
box.setModifier do |modifier|
modifier.fillMaxHeight(1.0)
modifier.weight(1.0, true)
modifier.background(lambda { |it| it.setGreen(255) }, lambda { |shapes| shapes.getRectangleShape() })
end
end
end
end
end
# 启动一个Activity用于显示脚本界面
$activity.start()
约束条件和修饰符顺序
在 Compose 中，您可以将多个修饰符串联在一起，以更改可组合项的外观和风格。这些修饰符链可能会影响传递给可组合函数的约束条件，这些约束条件定义了宽度和高度边界。
本页介绍了串联的修饰符如何影响限制，进而影响可组合项的测量和放置。
界面树中的修饰符
09 December 2025