如何为MATLAB应用程序创建自定义UI？
MATLAB拥有我的应用程序中需要的所有功能，除了它构建的应用程序的21世纪外观之外。旧的UI控件与90年代的皮肤只是不再削减它。有没有办法定制编译后的窗口本身的GUI？我知道App Designer for MATLAB (据我所知，它是GUIDE的替代品)，但这还不够。例如，我想要一个完整的平面设计外观与精灵/按钮/等绘制在Photoshop中为我建立的应用程序。
在编译应用程序时，外部C库/框架是否能够构建自定义GUI？
我试着在谷歌上搜索这个问题，在科学界似乎没有人关心设计。我不知道该如何表达我的问题，抱歉。我希望你们中的一些人对此有一点经验。
附言:下面是我想要实现的外观：
回答 1
Stack Overflow用户
发布于 2021-08-05 15:49:32
正如我在前面的评论中所描述的，以及从R2019b开始的，您可以在新的基于web的uifigure中使用uihtml组件(在R2016a中引入)，以通过css + javascript自定义屏幕上显示的元素的样式
下面是css样式按钮的一个非常简单的示例：
首先是matlab代码(TestUiHtml.m)：
function [] = TestUiHtml()
%[
% Create the figure and layout
fig = uifigure('Name', 'Test uihtml', 'Color', [1 1 1]);
grid = uigridlayout('Parent', fig, 'ColumnWidth', { '1x', '1x' }, 'RowHeight', {200, '1x' }, 'BackgroundColor', fig.Color);
% Add a uihtml element (that will act like a button using html+css+javascript)
button = uihtml('Parent', grid, 'HTMLSource', 'myway.html', 'DataChangedFcn', @(s,e)onBtnClicked(fig));
% Button layout
button.Layout.Row = 1; button.Layout.Column = [1 2];
%]
end
function [] = onBtnClicked(fig)
%[
uialert(fig, 'World!', 'Clicked', 'Icon', 'info');
%]
end注意:上面的代码只是在图中添加了一个uihtml组件，它的属性HTMLSource指向您想要拥有的html内容。
下面是描述自定义uihtml组件内容(myway.html)的html代码：
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="myway.css">
<script type="text/javascript" src="myway.js"></script>
</head>
<html>
<body>
<div class="container">
<button class="skewBtn blue" id="btn">Hello!</button>
</div>
</body>
</html>注意:不一定要有完全良好的html代码(也就是说，只需要一个<button style="...">Hello</button>就可以了)。
用于设置html内容样式的链接css代码(myway.css)：
body {
background-color: transparent;
}
.container {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
height: 97vh;
}
.container .skewBtn {
width: 180px;
height: 80px;
outline: none;
cursor: pointer;
background: none;
transition: 0.5s;
font-size: 24px;
border-radius: 5px;
font-family: "Lato", sans-serif;
}
.container .skewBtn:hover {
border: none;
color: white;
font-size: 28px;
transform: scale(1.1);
}
.blue {
border: 2px solid #1976D2;
color: #1976D2;
}
.blue:hover {
background-color: #1976D2;
transition: all 0.3s ease-in-out;
}最后，在matlab和基于html的组件之间进行事件/数据编组的javascript代码...或者用于html内容(myway.js)的更高级的编程逻辑(如果有的话)：
function setup(htmlComponent)
{
document.getElementById("btn").addEventListener("click", function(event)
{
htmlComponent.Data = 1234; // dummy value to fire event on matlab side
});
}编组是通过htmlComponent对象的data属性来确保的，两端(即matlab/javascript)都在监听该对象的更改。Matlab在后台自动使用jsonencode/jsondecode，因此您可以直接来回传递几乎任何所需的结构/值。
瞧..。一个响应性好的css样式的按钮，如matlab图所示：
当然，将上述代码重构为基于现有uibutton属性名称/值对建模的uibuttonex类会更好。
来自R2021a的Sarting最终可以将其添加到应用程序设计器组件库中，如here所述(我个人不使用设计器，更喜欢以编程方式编写接口)。
一些备注
这是不可能直接样式退出uibutton，uipanel，uitab等...elements和Mathwork不允许访问uifigure的html，也不允许轻易地在其中注入css/javascript (参见下面的未记录的matlab thread => mlapptools项目，尝试欺骗东西)。例如，uibutton不能直接转换为uifigure源代码中的<button>标记，而是大量重叠的<div>，因此很难样式化(并且可能会从一个版本转换到另一个版本)。
我不建议在图中创建单个uihtml元素并用html+css+javascript编写所有代码，但我更推荐创建小而简单的自定义uibuttonex等元素……否则，您将不得不处理单个data blob来连接您的接口和matlab代码，这可能是棘手和难以重用的。
不幸的是，还不能创建自定义的html容器，您可以在其中添加其他子ui元素(自定义或非自定义)……说再见来创建类似于uix.GridFlex、uix.CardPanel的容器，或者创建风格精美的uitabex，等等。这确实是一个缺失的部分！
查看uifigure页面的源代码，自定义ui元素也嵌入到<iframe></iframe>标记中，因此不可能注入一些全局css/javascript代码(即，您必须为您创建的每个uihtml元素重复此操作)。因此，不可能(或难以)让多个uihtml元素彼此交互(除非在单个页面中对所有内容进行编码或仅通过matlab代码/事件传递)。
附录：Here是一种从父对象获取css样式的解决方案，不幸的是，这并不能解决在主uifigure源代码中注入这种css的需要(这可以在javascript中完成……就像if !exist(parent.elements where id="mycss") => parent.document.inject(lalala)一样)
有了uifigure和html作为后台，Mathworks正在朝着好的方向发展，但现在它仍然有点太锁定了，并且缺少了GUI Layout toolbox中的重要容器。
注意:我尝试了uifigure中的图形用户界面布局工具箱元素...一些正在工作(有很多调整错误)，另一些根本不工作(GridFlex)。也许新版本的工具箱将会出现。
图表
对于现代图表，您可以使用D3js、SciChart、LightningChart等javascript库！！。
文件交换上有一些example using D3
https://stackoverflow.com/questions/46573915
复制相似问题
腾讯云开发者
