How to use Appdesigner to keep adding a group of text inputs?

2 次查看（过去 30 天）
Yi Cheng
Yi Cheng 2025-3-26
回答： Marie Anna NOVIELLO 2025-3-27
I am thinking using the app designer for purpose similar to this:
A survey form that ask about a person's family.
But one can have many family members. Each group of fields contains things like Name, Age, Gender etc.
Is there a way I can create an appdesigner such that when i click a 'add more' button then another group of fileds will pop out for me to fill in.
How will the data be stored?
Best if it can be done with less tedious/less code methods, using app designer.
Appreciate your help.
  2 个评论
Les Beckham
Les Beckham 2025-3-26
I would suggest reusing the same data entry fields and then, each time you press the Add button, copying the contents to a separate text box or uitable, where you list the data for all family members added so far. Internally you would store the data in a cell array or table. This should be a lot simpler than dynamically creating more data entry fields.
Yi Cheng
Yi Cheng 2025-3-27
That might work.
However, with this implementation, this means that the user will not be able to edit or delete any details that one has submitted on the appdesigner UI. Would it be possible to display the keyed in information on the app designer UI?

请先登录，再进行评论。

请先登录，再回答此问题。

回答（1 个）

Marie Anna NOVIELLO
This technique offers a user-friendly interface that allows users to dynamically add new sections for each family member. The data is structured and can be easily processed or exported later. You can tailor the design and data storage methods to your specific requirements.
Details:
  1. FamilySurveyApp class: This is the core app that contains the UI components and manages data.
  2. FamilyPanel: This panel contains the data fields for each family member (name, age, gender). It is generated dynamically each time you click the "Add More" button.
  3. Add More Button: When clicked, the button creates new panels with the same layout, allowing the user to add as many family members as necessary.
  4. Storing Data: The FamilyData property saves references to all input fields so that you may retrieve or analyze them later.
classdef FamilySurveyApp < matlab.apps.AppBase
% Properties
properties (Access = public)
UIFigure matlab.ui.Figure
AddMoreButton matlab.ui.control.Button
FamilyPanel matlab.ui.container.Panel
FamilyData cell = {}; % Store family member data
end
methods (Access = private)
% Callback function for Add More button
function addMoreButtonPushed(app, event)
% Get the position of the current panel
nPanels = length(app.FamilyData);
% Create a new Panel for the new family member
newPanel = uipanel(app.UIFigure, 'Position', [20, 500 - 120 * (nPanels + 1), 300, 100]);
% Add fields (Name, Age, Gender) inside the new panel
uicontrol(newPanel, 'Style', 'text', 'String', 'Name:', 'Position', [10, 70, 50, 20]);
nameField = uicontrol(newPanel, 'Style', 'edit', 'Position', [60, 70, 100, 20]);
uicontrol(newPanel, 'Style', 'text', 'String', 'Age:', 'Position', [10, 40, 50, 20]);
ageField = uicontrol(newPanel, 'Style', 'edit', 'Position', [60, 40, 100, 20]);
uicontrol(newPanel, 'Style', 'text', 'String', 'Gender:', 'Position', [10, 10, 50, 20]);
genderField = uicontrol(newPanel, 'Style', 'edit', 'Position', [60, 10, 100, 20]);
% Save the UI components to FamilyData
app.FamilyData{end+1} = struct('Name', nameField, 'Age', ageField, 'Gender', genderField);
end
end
% Create UIFigure and components
methods (Access = public)
% Construct app
function app = FamilySurveyApp
% Create UIFigure
app.UIFigure = uifigure('Position', [100, 100, 400, 600]);
% Create the first family panel
app.FamilyPanel = uipanel(app.UIFigure, 'Position', [20, 500, 300, 100]);
% Add fields (Name, Age, Gender) inside the first panel
uicontrol(app.FamilyPanel, 'Style', 'text', 'String', 'Name:', 'Position', [10, 70, 50, 20]);
uicontrol(app.FamilyPanel, 'Style', 'edit', 'Position', [60, 70, 100, 20]);
uicontrol(app.FamilyPanel, 'Style', 'text', 'String', 'Age:', 'Position', [10, 40, 50, 20]);
uicontrol(app.FamilyPanel, 'Style', 'edit', 'Position', [60, 40, 100, 20]);
uicontrol(app.FamilyPanel, 'Style', 'text', 'String', 'Gender:', 'Position', [10, 10, 50, 20]);
uicontrol(app.FamilyPanel, 'Style', 'edit', 'Position', [60, 10, 100, 20]);
% Create Add More Button
app.AddMoreButton = uibutton(app.UIFigure, 'push', 'Text', 'Add More', 'Position', [20, 440, 100, 30]);
app.AddMoreButton.ButtonPushedFcn = @(btn, event) addMoreButtonPushed(app, event);
end
end
end

类别

在 Help Center 和 File Exchange 中查找有关 Develop uifigure-Based Apps 的更多信息

标签

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!

Translated by