如何使窗口适合其内容并将其居中放置在 Sciter 的屏幕上?

Posted

技术标签:

【中文标题】如何使窗口适合其内容并将其居中放置在 Sciter 的屏幕上?【英文标题】:How to fit a window to its contents and center it on the screen in Sciter? 【发布时间】:2021-05-23 00:26:06 【问题描述】:

第一次尝试 GUI 软件时,我要做的第一件事就是将窗口居中并使其适合其内容。我个人认为这应该尽可能简单,并且最好在官方文档中进行说明。

在我看来,将程序的主窗口置于屏幕中心的能力是任何 GUI 库的基本要求。

但是,我无法在官方文档中找到这些说明。

【问题讨论】:

【参考方案1】:

我不记得我在哪里找到了作者的说明,但这里是使用 TIScript 的“香草”Sciter:

const w = self.intrinsicWidthMax();
const h = self.intrinsicHeight();
const (sw, sh) = view.screenBox(#frame, #dimension);
view.move((sw / 2) - (w / 2), (sh / 2) - (h / 2), w, h, true);

#frame 在这里指的是整个屏幕或监视器。 #dimension 指定返回其widthheight(还有其他符号用于返回屏幕某些方面的坐标)。

view.move 是一个不幸命名的重载方法,因为它除了移动窗口外还允许调整窗口大小。最后一个布尔参数指定窗口框架和标题的大小是否应被视为总窗口大小的一部分。

在官方示例中,建议将其放在 function self.ready() ... 中,但将其放在主脚本文件的顶部没有遇到任何问题。

这是 Sciter.JS 的 javascript 端口:

// https://github.com/c-smile/sciter-js-sdk/discussions/39#discussioncomment-377697
const [ _, w ] = document.state.contentWidths();
const h = document.state.contentHeight(w);
const [ sw, sh ] = Window.this.screenBox('frame', 'dimension');
Window.this.move((sw - w) / 2, (sh - h) / 2, w, h, true);

【讨论】:

感谢您如此简单地解释这一点,并提供 Sciter.JS 等价物。主保佑你??

以上是关于如何使窗口适合其内容并将其居中放置在 Sciter 的屏幕上?的主要内容,如果未能解决你的问题,请参考以下文章

如何在保持背景的画布上修剪对象并将其居中?

Codenmae之一如何使在图标上面添加一个芽,并将其放置在工具栏中。

mfc 如何使窗口居中

居中图像 React Native 加载屏幕

水平居中一个元素,并在其右侧放置另一个元素

如何使背景位置固定并居中?