• 🔗 运行环境：Matlab
• 🚩 撰写作者：左手の明天
• 🥇 精选专栏：《python》
• 🔥  推荐专栏：《算法研究》

💗 大家好🤗🤗🤗，我是左手の明天！💗

📆  最近更新：2022 年 5 月 24 日，左手の明天的第 244 篇原创博客

📚 更新于专栏：Matlab GUI编程技巧

目录

🚩listbox控件用法和属性

🚩 回调函数

🚩添加/删除列表框中的项目

⭐️删除ListBox的某一项

⭐️添加ListBox的某一项

⭐️删除“空”项中的simpliest办法

🚩listbox读取/添加不重复数据

⭐️读取数据

⭐️写入数据

🚩创建列表框组件：uilistbox

⭐️语法

⭐️输入参数

parent - 父容器

Value - 值

Items - 列表框项目

ItemsData - 与 Items 属性值的每个元素关联的数据

Multiselect - 多项目选择

ValueChangedFcn - 值更改函数

Position - 列表框的位置和大小

⭐️创建列表框

⭐️设置和访问列表框属性值 

⭐️显示列表框选项

⭐️显示列表框数据

⭐️允许选择多个项目的列表框

🚩listbox控件用法和属性

列表框是一种 UI 组件，用于显示列表中的项目。可通过属性控制列表框的外观和行为。使用圆点表示法引用特定的对象和属性：

fig = uifigure;
list = uilistbox(fig);
list.Items = {'Red','Green','Blue'};

属性列表：

• Value - 值
• Items - 列表框项目
• ItemsData - 与 Items 属性值的每个元素关联的数据
• FontName - 字体名称
• FontSize - 字体大小
• FontWeight - 字体粗细

字体粗细，指定为下列值之一：

1.  'normal' - 特定字体定义的默认粗细

2. 'bold' - 字符轮廓比 'normal' 粗 并非所有字体都有加粗字体。对于非加粗字体，指定 'bold' 会得到普通字体。

• FontAngle - 字体角度

字体角度，指定为 'normal' 或 'italic'。并非所有字体都有倾斜字体角度。对于无斜体字体，指定 'italic' 后会使用常规字体角度。

• FontColor - 字体颜色

字体颜色，指定为 RGB 三元组、十六进制颜色代码或下表中列出的选项之一。

RGB 三元组和十六进制颜色代码对于指定自定义颜色非常有用。

1.  RGB 三元组是包含三个元素的行向量，其元素分别指定颜色中红、绿、蓝分量的强度。强度值必须位于 [0,1] 范围内，例如 [0.4 0.6 0.7]。
2. 十六进制颜色代码是字符向量或字符串标量，以井号 (#) 开头，后跟三个或六个十六进制数字，范围可以是 0 到 F。这些值不区分大小写。因此，颜色代码   '#FF8800'   与   '#ff8800'、'#F80' 与 '#f80' 是等效的。

 下表列出了命名颜色选项、等效 RGB 三元组和十六进制颜色代码。

• BackgroundColor - 背景色

• Visible - 可见性状态

可见性状态，指定为 'on' 或 'off'，或者指定为数值或逻辑值 1 (true) 或 0 (false)。值 'on' 等效于 true，'off' 等效于 false。

1.  'on' - 显示对象。
2.  'off' - 隐藏对象而不删除它。您仍然可以访问不可见 UI 组件的属性。

•  Multiselect - 多项目选择
• Enable - 工作状态
• ContextMenu - 上下文菜单
• Position - 列表框的位置和大小
• InnerPosition - 列表框的内部位置和大小
• OuterPosition - 列表框的外部位置和大小
• Layout - 布局选项

布局选项，指定为 GridLayoutOptions 对象。此属性为网格布局容器的子级组件指定选项。如果组件不是网格布局容器的子级（例如，它是图窗或面板的子级），则此属性为空且不起作用。但是，如果组件是网格布局容器的子级，则可以通过在 GridLayoutOptions 对象上设置 Row 和 Column 属性，将组件放置在网格的所需行和列中。

例如，以下代码将一个列表框放置在其父网格的第三行第二列中。

g = uigridlayout([4 3]);
list = uilistbox(g);
list.Layout.Row = 3;
list.Layout.Column = 2;

要使该列表框跨多个行或列，请将 Row 或 Column 属性指定为二元素向量。例如，此列表框跨列 2 到 3：

list.Layout.Column = [2 3];

• Type - 图形对象的类型
• Tag - 对象标识符
• UserData - 用户数据

🚩 回调函数

（1）Callback - 用户与控件交互时执行的回调函数

Note：''（默认） | 函数句柄 | 元胞数组 | 字符串

此函数使控件响应用户输入，例如按钮点击、滑动条移动或复选框选中。

（2）CreateFcn - 控件创建函数

Note：函数句柄 | 元胞数组 | 字符串

该属性指定要在 MATLAB 创建 uicontrol 时执行的回调函数。MATLAB 在执行 CreateFcn 回调之前初始化所有的控件属性值。如果不指定 CreateFcn 属性，则 MATLAB 执行默认的创建函数。

在CreateFcn 代码中使用 [gcbo] 函数可以获得创建的控件的句柄。

对现有控件设置 CreateFcn 属性没有任何作用。

（3）DeleteFcn - 控件删除函数

Note：函数句柄 | 元胞数组 | 字符串

DeleteFcn 属性指定要在 MATLAB 删除控件时（例如，最终用户删除图形时）执行的回调函数。MATLAB 在销毁控件的属性之前执行 DeleteFcn 回调。如果不指定 DeleteFcn 属性，则 MATLAB 执行默认的删除函数。

在 DeleteFcn 代码中使用 gcbo 函数以获得删除的控件的句柄。

（4）ValueChangedFcn - 值更改函数

当用户从列表框中选择不同的项目时，将会执行此回调函数。如果以编程方式更改 Value 属性设置，将不会执行此回调函数。

此回调函数可以访问有关用户与列表框的交互的特定信息。MATLAB 将 ValueChangedData 对象中的此信息作为第二个参数传递给回调函数。在 App 设计工具中，该参数名为 event。您可以使用圆点表示法查询对象属性。例如，event.PreviousValue 返回列表框的上一个值。ValueChangedData 对象不可用于指定为字符向量的回调函数。

下表列出了 ValueChangedData 对象的属性。

🚩添加/删除列表框中的项目

实现的功能

matlab中尝试创建一个列表框，可以动态添加或删除项目

需要用到listbox的handle，可以用findobj来获得

hMyListBox = findobj('type', 'listbos'); %如果你的GUI上只有一个listbox的话

⭐️删除ListBox的某一项

oldString = get(hMyListBox, 'String'); 
curPos = get(hMyListBox, 'Value'); 
oldString(curPos) = []; 
set(hMyListBox, 'String', oldString);

当然也可以通过以下方式实现：

n=get(handles.listbox,'value'); %获取选中的行号
str=get(handles.listbox,'string'); %获取列表中的所有数据
m=size(str1,1);
k=0;
for i=1:m
    for j=1:size(n,2)
        if(i~=n(j))
            k=k+1;
            str1(k,:)=str(i,:);
        end
    end
end
set(handles.listbox,'string',str1);

⭐️添加ListBox的某一项

newItem={'This is a new string'}; 
oldString = get(hMyListBox, 'String'); 
curPos = get(hMyListBox, 'Value'); 
numStrings = length(oldString); 
newString = {oldString(1:curPos) newItem oldString(curPos:numStrings)}; 
set(hMyListBox, 'String', newString);

⭐️删除“空”项中的simpliest办法

删除“空”项中的simpliest办法就是更新listbox字符串与remainig项目。

有三种可能性：

• 第一个元素已被删除：新列表将为upd_list={existingItems{2:end}}
• 最后一个元素已被删除：新列表将为upd_list={existingItems{1:end-1}}
• ans中间元素已被删除：新列表将为upd_list={existingItems{1:selectedId-1} existingItems{selectedId+1:end}}

还可以检查列表的所有元素都被删除，在这种情况下，禁用“删除”pushbutton;在这种情况下，您必须在“添加”callback中启用它。

btnDeleteLabel_Callback相关代码可以为如下：

% --- Executes on button press in btnDeleteLabel. 
function btnDeleteLabel_Callback(hObject, eventdata, handles) 
% hObject handle to btnDeleteLabel (see GCBO) 
% eventdata reserved - to be defined in a future version of MATLAB 
% handles structure with handles and user data (see GUIDATA) 

selectedId = get(handles.listbox_labels, 'Value')  % get id of selectedLabelName 
existingItems = get(handles.listbox_labels, 'String') % get current listbox list 
% 
% It is not necessary 
% 
% existingItems{selectedId} = []     % delete the id 

% Identify the items: if in the list only one ites has been added the 
% returned list is a char array 
if(class(existingItems) == 'char') 
    upd_list='' 
    set(handles.listbox_labels, 'String', upd_list) 
else 
    % If the returned list is a cell array there are three cases 
    n_items=length(existingItems) 
    if(selectedId == 1) 
     % The first element has been selected 
     upd_list={existingItems{2:end}} 
    elseif(selectedId == n_items) 
     % The last element has been selected 
     upd_list={existingItems{1:end-1}} 
     % Set the "Value" property to the previous element 
     set(handles.listbox_labels, 'Value', selectedId-1) 
    else 
     % And element in the list has been selected 
     upd_list={existingItems{1:selectedId-1} existingItems{selectedId+1:end}} 
    end 
end 
% Update the list 
set(handles.listbox_labels, 'String', upd_list)  % restore cropped version of label list 

% Disable the delete pushbutton if there are no more items 
existingItems = get(handles.listbox_labels, 'String') 
if(isempty(existingItems)) 
    handles.btnDeleteLabel.Enable='off' 
end 

🚩listbox读取/添加不重复数据

⭐️读取数据

• 如果列表只有1个数据，则读取格式为char；
• 如果列表有多于1个数据，则读取格式为cell；

因此，为了统一，使用了str to cell转换函数cellstr()

print_list = cellstr(get(handles.listbox2,'string'));

⭐️写入数据

将new_print_list写入listbox中

set(handles.listbox,'string',new_print_list);

缺陷：以上方式会清空原来listbox中的数据，直接用new_print_list覆盖。

如果想要保留原来listbox中的数据，而且满足 “如果新数据已经在列表中，则忽略；否则就加到列表中”，那么可以改为以下代码：

% 先读取原list中的数据
print_list = cellstr(get(handles.listbox,'string'));

% 如果new_print_list是新数据，则加入列表；否则不加入
if ~strcmp(cur_str, print_list)
	new_print_list = [print_list; cellstr(cur_str)];
	set(handles.listbox,'string',new_print_list);
end

🚩创建列表框组件：uilistbox

⭐️语法

• lb = uilistbox ：在新图窗窗口中创建一个列表框，并返回 ListBox 对象。
• lb = uilistbox(parent) ：在指定的父容器中创建列表框。父容器可以是使用uifigure函数创建的 Figure 或其子容器之一。
• lb = uilistbox(___,Name,Value) ：使用一个或多个 Name,Value 对组参数指定 ListBox 属性。

⭐️输入参数

parent - 父容器

指定为使用 uifigure 函数创建的 Figure 对象或其子容器之一：Tab、Panel、ButtonGroup 或 GridLayout。如果不指定父容器，MATLAB 会调用 uifigure 函数创建新 Figure 对象充当父容器。

Value - 值

指定为 Items 数组或 ItemsData 数组的元素，或指定为空元胞数组。默认情况下，Value 是 Items 中的第一个元素。

要不指定任何选择，请将 Value 设置为空元胞数组。

将 Value 指定为 Items 的元素，即可选择与该元素匹配的列表项。如果 ItemsData 非空，则 Value 必须设置为 ItemsData 的元素，而列表框将选中列表中的关联项目。

Items - 列表框项目

指定为字符向量元胞数组、字符串数组或一维分类数组。允许重复的元素。列表框显示的选项与 Items 数组中的元素数量一样多。如果将此属性指定为分类数组，MATLAB 将使用数组中的值，而不是完整的类别集。

ItemsData - 与 Items 属性值的每个元素关联的数据

与 Items 属性值的每个元素关联的数据，指定为 1×n 数值数组或 1×n 元胞数组。允许重复的元素。

例如，如果您将 Items 值设置为员工姓名，则可以将 ItemsData 值设置为对应的员工 ID 号。ItemsData 值对 App 用户不可见。

如果 ItemsData 值和 Items 值中的数组元素数量不匹配，将发生以下情况之一：

• 如果 ItemsData 值为空，则 Items 值的所有元素都呈现给 App 用户。

• 如果 ItemsData 值中的元素数大于 Items 值，则 Items 值的所有元素都呈现给 App 用户。MATLAB 将忽略多余的 ItemsData 元素。

• 如果 ItemsData 值非空，但元素数少于 Items 值，只将在 ItemsData 值中具有对应元素的 Items 值的元素呈现给 App 用户。

示例： {'One','Two','Three'}

示例： [10 20 30 40]

Multiselect - 多项目选择

多项目选择，指定为 'off' 或 'on'，或者指定为数值或逻辑值 1 (true) 或 0 (false)。值 'on' 等效于 true，'off' 等效于 false。因此，您可以使用此属性的值作为逻辑值。

ValueChangedFcn - 值更改函数

当用户从列表框中选择不同的项目时，将会执行此回调函数。如果以编程方式更改 Value 属性设置，将不会执行此回调函数。

此回调函数可以访问有关用户与列表框的交互的特定信息。MATLAB 将 ValueChangedData 对象中的此信息作为第二个参数传递给回调函数。在 App 设计工具中，该参数名为 event。您可以使用圆点表示法查询对象属性。例如，event.PreviousValue 返回列表框的上一个值。ValueChangedData 对象不可用于指定为字符向量的回调函数。

下表列出了 ValueChangedData 对象的属性。

Position - 列表框的位置和大小

列表框相对于父容器的位置和大小，指定为向量 [left bottom width height]。下表介绍该向量中的每个元素。

所有测量值都以像素为单位。

Position 值相对于父容器的可绘制区域。可绘制区域是指容器边框内的区域，不包括装饰元素（如菜单栏或标题）所占的区域。

示例： [100 100 100 200]

⭐️创建列表框

在图窗窗口中创建一个列表框。

fig = uifigure('Position', [100 100 300 250]);
lbx = uilistbox(fig);

⭐️设置和访问列表框属性值 

创建一个列表框。

fig = uifigure;
lbx = uilistbox(fig);

确定列表框是否允许多选。

multi = lbx.Multiselect

multi =

     off

允许多选。

lbx.Multiselect = 'on';

⭐️显示列表框选项

创建一个列表框，以便在用户选择列表中的某个项目时执行相应操作。

将以下代码以 selectlistbox.m 文件保存到 MATLAB 路径上。

此代码将创建一个 App，其中包含一个列表框和一个文本区域。ValueChangedFcn 回调将更新文本区域以显示列表框选项。

function selectlistbox

fig = uifigure('Position',[100 100 350 275]);

% Create text area
txt = uitextarea(fig,...
    'Position',[125 90 100 22],...
    'Value','First');

% Create list box
lbox = uilistbox(fig,...
    'Position',[125 120 100 78],...
    'Items',{'First','Second','Third'},... 
    'ValueChangedFcn', @updateEditField); 

% ValueChangedFcn callback
function updateEditField(src,event) 
    txt.Value = src.Value;
end

end

运行 selectlistbox 并从列表中选择一个选项。

⭐️显示列表框数据

创建一个列表框，其中的每个项目都有关联的数值。当用户选择列表框中的项目时，编辑字段将显示关联的数值。

将以下代码以 dataselection.m 文件保存到 MATLAB 路径上。此代码将创建一个 App，其中包含一个列表框和一个数值编辑字段。列表中的每一项都有与其关联的温度。当用户选择列表中的项目时，ValueChangedFcn 回调将在编辑字段中显示相应的温度。

function dataselection
fig = uifigure('Position',[100 100 350 275]);

% Create Numeric Edit Field
ef = uieditfield(fig,'numeric',...
    'Position',[125 90 100 22]);

% Create List Box
lbox = uilistbox(fig,...
    'Items', {'Freezing', 'Warm', 'Hot', 'Boiling'},...
    'ItemsData', [0, 25, 40, 100],...
    'Position',[125 120 100 78],...
    'ValueChangedFcn', @selectionChanged);

% ValueChangedFcn callback
function selectionChanged(src,event)
    % Display list box data in edit field
    ef.Value = src.Value;
end

end

运行 dataselection 并选择列表中的项目。数值编辑字段将更新以反映与所选项相关联的温度。

⭐️允许选择多个项目的列表框 

创建一个 App，其中包含一个列表框，允许选择多个项目。编写 ValueChangedFcn 回调以便在列表框下方的文本区域中显示所选项。

将以下代码以 multiselect.m 文件保存到 MATLAB 路径上。

function multiselect
fig = uifigure('Position',[100 100 350 275]);

% Create Text Area
txt = uitextarea(fig,...
    'Position',[125 80 100 50]);

% Create List Box
lbox = uilistbox(fig,...
    'Position',[125 150 100 78],...
    'Multiselect','on',...
    'ValueChangedFcn',@selectionChanged);

% ValueChangedFcn callback
function selectionChanged(src,event)
    txt.Value = src.Value;
end

end

运行 multiselect，然后从列表中选择项目。文本区域显示您选择的内容。

🌟全文共9567个字，码字总结不易，老铁们来个三连：点赞、关注、评论🌟

🌟作者：左手の明天🌟

🌟原创不易，转载请联系作者并注明出处🌟

后台数据的结构如下：

"productfactors": [
  {//产品投保要素
    "factortype": "Period",//要素类型
    "datatype": "08",//数据类型
    "productfactorvalues": [
      { //投保要素值列表
        "factorvalue": "1Y",//投保要素值计算值
        "factordisplayvalue": "1年",//投保要素值显示值
        "isdisplay": "Y",//是否显示
        "isdefaultvalue": "Y",//是否为默认值
        "showorder": 1//排序序号
      },
      { //投保要素值列表
        "factorvalue": "2Y",//投保要素值计算值
        "factordisplayvalue": "1年",//投保要素值显示值
        "isdisplay": "Y",//是否显示
        "isdefaultvalue": "N",//是否为默认值
        "showorder": 2//排序序号
      },
    ]
  },
  {//产品投保要素
    "factortype": "Period",//要素类型
    "datatype": "08",//数据类型
    "productfactorvalues": [
      { //投保要素值列表
        "factorvalue": "1Y",//投保要素值计算值
        "factordisplayvalue": "1岁",//投保要素值显示值
        "isdisplay": "Y",//是否显示
        "isdefaultvalue": "Y",//是否为默认值
        "showorder": 1//排序序号
      },
      { //投保要素值列表
        "factorvalue": "2Y",//投保要素值计算值
        "factordisplayvalue": "2岁",//投保要素值显示值
        "isdisplay": "Y",//是否显示
        "isdefaultvalue": "N",//是否为默认值
        "showorder": 2//排序序号
      }
    ]
  }
],

html代码如下：

<!-- 下拉框 -->
<view class="PolicyholderContentText" v-for="(items,Index) in productfactorslist" v-show="items.isdisplay=='Y' && items.datatype=='08' " :name="items.factortype" :value="items.productfactorvalues[ValData[items.factortype]].factordisplayvalue">
  <text>{{items.factortypename}}</text>
  <picker  class="type" mode = "selector" :data-type="items.productfactorvalues[ValData[items.factortype]].factorvalue" :id="items.factortype" @change="bindPickerChange(items,$event)" :value="ValData[items.factortype]" :range="items.productfactorvalues" :range-key="'factordisplayvalue'" :data-current="Index"  :name="items.factortype" >
    <view>{{items.productfactorvalues[ValData[items.factortype]].factordisplayvalue}}</view>
  </picker>
</view>

首先要根据接口把数据获取回来，获取回来的数据进行处理，得到外层的数组就是上面的productfactors数组，只是我们在data中声明一个变量数组来接收获取回来的数据，例如：productfactorslist:[]。

正如官方文档所说的uni-app中picker，picker中range的值是一个数组，因为是双层数组，我们所需要的下拉框的值是一个数组，不需要便利，这时候我们如果通过items.productfactorvalues取值，再通过@change事件把我们下拉选择的索引传给e.target.value，这样我们是可以修改下拉框的值，但是会造成遍历出来的下拉框会联动，因为他们的索引没有区分，所以想要区分每一个下拉框的值，我们就需要在本质上区分他们的索引，每一个下拉框有自己的索引，这样选择一个下拉框的索引才不会干扰其他的下拉框。

我的做法是根据数据所获取回来的投保要素的要素类型factortype进行区分，首先要创建一个空对象，代码如下：

ValData:{},

然后再向空对象中传参数和值，参数就是我们遍历出来的每一个要素类型factortype，这是我们就要在初始加载页面的时候Onload中获取数据时候操作，代码如下：

success:(res) => {
  var Data = res.data;
  this.product = Data.data.product;
  this.Initprem = this.product.initprem;
  // this.productfactorslist = Data.data.product.productfactors;
  var Datalist = [];
  Datalist =  Data.data.product.productfactors;
  console.log(Datalist);
  var len = Datalist.length;
  this.productfactorslist = Datalist;
  // 下拉框初始赋值
  Datalist.forEach((Val,Valindex)=>{
    if(Datalist[Valindex].datatype == '08'){							 
      Val.productfactorvalues.forEach(({factorvalue,isdefaultvalue},index)=>{
        if(isdefaultvalue == 'Y'){
          this.ValData[Val.factortype]=index;
          this.ValList[Val.factortype]=factorvalue;
        }
      })
    }
  })
  console.log(this)
  console.log(this.productfactorslist);
},
fail:(res)=> {
  console.log(res);
}

这时候还会有一个下拉框初始显示默认值，是根据isdefaultvalue 属性来确定的，上面的数据中有，这样通过forEach遍历数组就会给每一个下拉框附一个初始值，初始值是根据索引来获取的在picker中，这样在页面加载的时候我们直接把获取到默认的索引值直接赋给所选取的索引值e.target.value即可，代码如下:

bindPickerChange: function(items,e) {
  console.log(e)
  console.log(items)
  var id = items.factortype;
  this.ValData[id] = e.target.value;
  this.ValList[id] = items.productfactorvalues[this.ValData[items.factortype]].factorvalue;
  console.log(this)
  this.$forceUpdate();
},

这样就可以选择单独的下拉框，索引值不会共用了，就可以数据单独选择了，在这里他也出现了一个问题，因为vue框架在加载多层数据时候有时候不会自动自动渲染数据，需要我们强制让页面选自然数据，只需要在change事件末尾加一个this.$forceUpdate();就可以强制渲染，完成数据加载。

在完成下拉框的数据加载之后，选择完数据之后我们就要把选择的数据传到后台进行提交，这时候就需要进行表单提交了，但是这个uni-app中picker的表单提交只能默认在e.target.detail中，并且我不太懂他传过去数据的属性是怎末来的，所以我还是自己写了个对象，用来接受表单提交的数据，和刚才获取索引的时候的方法一样。过程如下：

首先建立一个空对象ValList:{}，

然后在页面初始加载数据的时候就给ValList赋予一个初始的属性和值，属性还是刚才数据中的投保要素类型factorvalue，值就是根据isdefaultvalue来判断获取的一个值，代码如下：this.ValList那行

Datalist.forEach((Val,Valindex)=>{
  if(Datalist[Valindex].datatype == '08'){							    
    Val.productfactorvalues.forEach(({factorvalue,isdefaultvalue},index)=>{
      if(isdefaultvalue == 'Y'){
        this.ValData[Val.factortype]=index;
        this.ValList[Val.factortype]=factorvalue;
      }
    })
  }
})

然后再@change事件中也要根据刚才获取的索引来取值并添加到我们创建的空对象ValList中，代码如下：this.ValList那行

bindPickerChange: function(items,e) {
  console.log(e)
  console.log(items)
  var id = items.factortype;
  this.ValData[id] = e.target.value;
  this.ValList[id] = items.productfactorvalues[this.ValData[items.factortype]].factorvalue;
  console.log(this)
  this.$forceUpdate();
},

这时候我们选择一个值之后就会创建一个空对象ValData存储我们获取值的属性和索引，同时创建一个空对象ValList来存储我们要提交的表单的值，也就是获取的下拉框的属性和值。控制台打印出的this的值如下：

实现的下拉框效果如下：

选择一个下拉框修改值之后