在Hamibot中，你可以使用floaty.window()或floaty.rawWindow()创建一个悬浮窗，并通过布局和事件监听实现输入名字和性别，以及保存和取消的功能。以下是一个简单的示例代码：

// 文档地址 https://docs.hamibot.com/
// 创建悬浮窗
var floatyWin = floaty.window(
    <vertical padding="10">
        <text text="姓名:"/>
        <input id="name" hint="请输入姓名"/>
        <text text="性别:"/>
        <input id="gender" hint="请输入性别"/>
        <horizontal>
            <button id="saveBtn" text="保存"/>
            <button id="cancelBtn" text="取消"/>
        </horizontal>
    </vertical>
);

// 设置悬浮窗位置
floatyWin.setPosition(100, 100);

// 保存按钮点击事件
floatyWin.saveBtn.click(function () {
    var name = floatyWin.name.getText();
    var gender = floatyWin.gender.getText();
    toast("保存成功！姓名: " + name + ", 性别: " + gender);
    // 这里可以添加保存逻辑
});

// 取消按钮点击事件
floatyWin.cancelBtn.click(function () {
    toast("已取消");
    floatyWin.close();
});

说明：

1. 创建悬浮窗：使用floaty.window()创建一个包含姓名、性别输入框以及保存和取消按钮的悬浮窗。
2. 设置位置：使用setPosition(x, y)方法设置悬浮窗的位置。
3. 事件监听：
   • 保存按钮：当点击保存按钮时，获取输入框中的内容并显示提示信息。
   • 取消按钮：当点击取消按钮时，关闭悬浮窗。

这个示例展示了如何创建一个简单的悬浮窗，并处理保存和取消操作。你可以根据需要进一步扩展功能。

补充回答 1

在Hamibot中，你可以通过获取屏幕分辨率并计算悬浮窗的位置，使其在屏幕上下左右居中显示。同时，可以通过设置背景颜色为灰色来实现灰色底色。以下是修改后的示例代码：

// 文档地址 https://docs.hamibot.com/
// 获取屏幕分辨率
var screenWidth = device.width;
var screenHeight = device.height;

// 创建悬浮窗
var floatyWin = floaty.window(
    <vertical padding="10" bg="#808080"> <!-- 设置灰色底色 -->
        <text text="姓名:"/>
        <input id="name" hint="请输入姓名"/>
        <text text="性别:"/>
        <input id="gender" hint="请输入性别"/>
        <horizontal>
            <button id="saveBtn" text="保存"/>
            <button id="cancelBtn" text="取消"/>
        </horizontal>
    </vertical>
);

// 计算悬浮窗位置并设置
var windowWidth = floatyWin.getWidth();
var windowHeight = floatyWin.getHeight();
var x = (screenWidth - windowWidth) / 2;
var y = (screenHeight - windowHeight) / 2;
floatyWin.setPosition(x, y);

// 保存按钮点击事件
floatyWin.saveBtn.click(function () {
    var name = floatyWin.name.getText();
    var gender = floatyWin.gender.getText();
    toast("保存成功！姓名: " + name + ", 性别: " + gender);
    // 这里可以添加保存逻辑
});

// 取消按钮点击事件
floatyWin.cancelBtn.click(function () {
    toast("已取消");
    floatyWin.close();
});

说明：

1. 获取屏幕分辨率：使用device.width和device.height获取屏幕的宽度和高度。
2. 计算悬浮窗位置：通过计算屏幕中心点坐标，将悬浮窗的位置设置为屏幕中心。
3. 设置灰色底色：在布局中使用bg="#808080"设置灰色底色。

这个示例展示了如何创建一个居中显示且有灰色底色的悬浮窗，并处理保存和取消操作。你可以根据需要进一步扩展功能。