如何为 MATLAB 应用程序创建自定义 UI？
Mic*_*ard 4 matlab matlab-guide
MATLAB 拥有我在我的应用程序中需要的所有功能，除了一个 - 对它构建的应用程序的 21 世纪外观。带有 90 年代皮肤的旧 UI 控件不再削减它。有没有办法自定义编译窗口本身的 GUI？我知道 MATLAB 的 App Designer（据我所知，这是 GUIDE 的替代品），但这还不够。例如，我想要一个完整的平面设计外观，在 Photoshop 中为我构建的应用程序绘制精灵/按钮/等。
编译应用程序时，外部 C 库/框架是否能够构建自定义 GUI？
我试图用谷歌搜索这个问题，似乎科学界没有人关心设计。我不太确定如何表达我的问题，抱歉。我希望你们中的一些人对此有一些经验。
PS：以下是我想要实现的外观：
正如我之前的评论中所述，从 R2019b 开始，您可以在新的基于 Web 的uifigure（在 R2016a 中引入）中使用uihtml组件通过+自定义出现在屏幕上的元素的样式cssjavascript
下面是一个非常简单的 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组件内容的 html 代码( myway.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的部件之间的事件/数据编组...或更先进的程序设计逻辑，如果有的话，的HTML内容（JavaScript代码myway.js）：
function setup(htmlComponent)
{
document.getElementById("btn").addEventListener("click", function(event)
{
htmlComponent.Data = 1234; // dummy value to fire event on matlab side
});
}
编组是通过双方（即 matlab/javascript）正在侦听更改data的htmlComponent对象的属性来确保的。Matlab在后台自动使用jsonencode / jsondecode，因此您可以直接来回传递几乎任何您需要的结构/值。
瞧……matlab 图中的一个漂亮且响应迅速的 css 样式按钮：
当然最好将上面的代码重构为一个uibuttonex基于现有uibutton属性名称/值对建模的类。
从R2021a Sarting它最终可能将其添加到组件描述应用程序设计者库在这里（我个人不使用设计，喜欢的代码编程接口）。
一些备注
无法直接设置 exiting uibutton, uipanel, uitab, 等...元素的样式=> Mathwork 不允许访问 uifigure 的 html，也不允许在其中轻松注入 css/javascript（请参阅以下未记录的 matlab线程和mlapptools项目以尝试作弊）。例如， auibutton不会直接转换为<button>uifigure 源代码中的标记，而是大量的叠瓦<div>，因此很难设置样式（并且可能会从一个版本更改为另一个版本）。
我不建议uihtml在图中创建单个元素并在 html+css+javascript 中编写所有内容，但我宁愿建议创建小而简单的 customuibuttonex等元素......否则你将不得不处理单个datablob将您的接口与 matlab 代码连接起来，这可能很棘手且难以重用。
遗憾的是，尚无法创建自定义HTML的容器，可以在其中添加其他子UI元素（定制和非定制）......说再见创建一个类似于集装箱uix.GridFlex，uix.CardPanel从美妙的 GUI 布局工具箱或创建漂亮的样式uitabex等......这真的是一个缺失的部分！
查看uifigure页面的源代码，自定义 ui 元素也嵌入在<iframe></iframe>标记中，因此不可能注入一些全局 css/javascript 代码（即您必须为uihtml您创建的每个元素重复此操作）。不可能（或困难）让多个 uihtml 元素相互交互（除非在单个页面中编码所有内容或仅通过 matlab 代码/事件）。
附录：这是从父级获取 css-style 的解决方案，不幸的是，这并不能解决需要在主 uifigure 源中注入此 css 的问题（这可以在 javascript 中完成...类似if !exist(parent.elements where id="mycss") => parent.document.inject(lalala)）
Mathworks在后台uifigure和html后台都朝着好的方向发展，但它现在仍然有点过于锁定，并且缺少GUI 布局工具箱中的重要容器。
注意：我在uifigure...中尝试了 GUI 布局工具箱元素……有些正在工作（有很多调整大小的错误），有些则根本无法工作（GridFlex）。也许工具箱的新版本会出现。
制图
对于现代图表，您可以使用D3js、SciChart、LightningChart或其他javascript 库！！。
有一些在 fileexchange 上使用 D3的例子