Question

MATLAB拥有我应用程序中所需的所有功能，除了一个 - 它构建的应用程序的21世纪外观。旧的UI控件与90年代的皮肤只是不再削减它。有没有办法自定义编译窗口本身的GUI？我知道App Designer for MATLAB（这是我理解的GUIDE的替代方案），但这还不够。例如，我想要一个完整的平面设计外观，在Photoshop中为我的构建应用程序绘制精灵/按钮等。

外部C库/框架在编译应用程序时是否能够构建自定义GUI？

我试图谷歌这个问题，似乎没有人关心科学界的设计。我不太确定如何表达我的问题，道歉。我希望你们中的一些人对此有一点经验。

P.S。：以下是我想要实现的目标：

Answer 1

如我之前的评论中所述，并且从 R2019b 开始，您可以在新的基于网络的 uihtml（在 R2016a 中引入）中使用 uifigure 组件来自定义样式通过 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
    });
}

通过 data 对象的 htmlComponent 属性确保编组，双方（即 matlab/javascript）都在监听更改。 Matlab 在后台自动使用 jsonencode/jsondecode，因此您可以直接来回传递几乎任何您需要的结构/值。

瞧……matlab 图中的一个漂亮且响应迅速的 css 样式按钮：

当然最好将上述代码重构为以现有 uibutton 属性名称/值对为模型的 uibuttonex 类。

从 R2021a 开始，最终可以将其添加到应用程序设计器组件库中，如here 所述（我个人不使用设计器，更喜欢以编程方式对界面进行编码）。

一些说明

无法直接设置退出的样式 uibutton、uipanel、uitab 等...元素 => Mathwork 不允许访问 uifigure 的 html 也不允许注入 css/javascript很容易（请参阅以下未记录的 matlab thread 和 mlapptools 项目以尝试作弊）。例如，在 uifigure 的源代码中，uibutton 不会直接转换为 <button> 标记，而是大量的叠瓦 <div>，因此很难设置样式（并且可能会从一个版本更改为另一个版本） ).

我不建议在图中创建单个 uihtml 元素并在 html+css+javascript 中编码所有内容，但我宁愿建议创建小而简单的自定义 uibuttonex 等元素。 .. 否则您将不得不处理单个 data blob 以将您的接口与 matlab 代码连接起来，这可能很棘手且难以重用。

不幸的是，目前还无法创建自定义 html 容器，您可以在其中添加其他子 ui 元素（自定义或非自定义）……说再见以创建类似于 uix.GridFlex 的容器， uix.CardPanel 来自精彩的 GUI 布局工具箱或创建样式精美的 uitabex 等......这真的是一个缺失的部分！

查看 uifigure 页面的源代码，自定义 ui 元素也嵌入在 <iframe></iframe> 标记中，因此无法注入一些全局 css/javascript 代码（即您必须对您创建的每个 uihtml 元素重复此操作）。不可能（或困难）让多个 uihtml 元素相互交互（除非在单个页面中编码所有内容或仅通过 matlab 代码/事件）。

附录：Here 是一种从父级获取 css-style 的解决方案，不幸的是，这并不能解决在主 uifigure 源中注入此 css 的需要（这可以做到）在 javascript 中……类似 if !exist(parent.elements where id="mycss") => parent.document.inject(lalala))

Mathworks 在后台使用 uifigure 和 html 朝着好的方向发展，但它现在仍然有点过于锁定并且缺少来自 GUI Layout toolbox 的重要容器。

注意：我在 uifigure 中尝试了 GUI 布局工具箱元素......有些正在工作（有很多调整大小的错误），其他根本不工作（GridFlex）。也许会推出新版本的工具箱。

图表

对于现代图表，您可以使用 javascript 库，例如 D3js、SciChart、LightningChart 或其他！！。

文件交换中有一些example using D3

如何为MATLAB应用程序创建自定义UI？

1 个答案: