运行时向GridPanelLayout添加组件后列对齐异常问题求助

问题详情 #

运行时向GridPanelLayout中添加组件组，每组包含1个TLabel、2个TButton和1个TEdit，要求每组占一行，每个组件各占一列。目前成功添加2组组件，但第一组的TButton、TEdit在窗口调整大小时无法与列对齐，其余组件均正常。布局结构为TLayout嵌套GridPanelLayout并设置为Client对齐。

相关代码 #

原运行时添加组件代码 #

procedure TForm1.FormCreate(Sender: TObject);
var
  i: Integer;
  LLabel: TLabel;
  LBtn1, LBtn2: TButton;
  LEdit: TEdit;
begin
  for i := 0 to 1 do
  begin
    LLabel := TLabel.Create(GridPanelLayout1);
    LLabel.Text := 'Label ' + IntToStr(i);
    LLabel.Parent := GridPanelLayout1;
    GridPanelLayout1.AddObject(LLabel);

    LBtn1 := TButton.Create(GridPanelLayout1);
    LBtn1.Text := 'Btn1 ' + IntToStr(i);
    LBtn1.Parent := GridPanelLayout1;
    GridPanelLayout1.AddObject(LBtn1);

    LBtn2 := TButton.Create(GridPanelLayout1);
    LBtn2.Text := 'Btn2 ' + IntToStr(i);
    LBtn2.Parent := GridPanelLayout1;
    GridPanelLayout1.AddObject(LBtn2);

    LEdit := TEdit.Create(GridPanelLayout1);
    LEdit.Text := 'Edit ' + IntToStr(i);
    LEdit.Parent := GridPanelLayout1;
    GridPanelLayout1.AddObject(LEdit);
  end;
end;

FMX布局文件片段 #

<object class="TForm" ...>
  <object class="TLayout" Name="Layout1" Align="Client">
    <object class="TGridPanelLayout" Name="GridPanelLayout1" Align="Client" ColumnCollection="True" RowCollection="True">
      <Columns>
        <item Width="100"/>
        <item Width="100"/>
        <item Width="100"/>
        <item Width="100"/>
      </Columns>
      <Rows>
        <item Height="40"/>
        <item Height="40"/>
      </Rows>
    </object>
  </object>
</object>

截图说明 #

• 窗口正常大小状态：所有组件均在对应行列内，显示正常。
  正常大小显示截图
• 窗口调整大小后：第一组的TButton、TEdit位置偏移，未跟随列宽变化；第二组组件保持与列对齐。
  调整后偏移截图

问题原因与解决方法 #

原因 #

原代码仅通过AddObject将组件添加到布局中，未明确指定组件对应的列索引、行索引，也未开启组件的拉伸属性，导致第一组组件未正确绑定到列的尺寸约束，窗口调整时无法跟随列宽变化。

解决步骤 #

1. 修改组件添加代码：使用GridPanelLayout.SetControl方法明确指定每个组件的列、行索引，并设置组件填充单元格且允许拉伸：

procedure TForm1.FormCreate(Sender: TObject);
var
  i: Integer;
  LLabel: TLabel;
  LBtn1, LBtn2: TButton;
  LEdit: TEdit;
begin
  for i := 0 to 1 do
  begin
    // 第i行第0列：Label
    LLabel := TLabel.Create(GridPanelLayout1);
    LLabel.Text := 'Label ' + IntToStr(i);
    LLabel.Parent := GridPanelLayout1;
    LLabel.Align := TAlignLayout.Client;
    LLabel.Stretch := True;
    GridPanelLayout1.SetControl(LLabel, 0, i);

    // 第i行第1列：Button1
    LBtn1 := TButton.Create(GridPanelLayout1);
    LBtn1.Text := 'Btn1 ' + IntToStr(i);
    LBtn1.Parent := GridPanelLayout1;
    LBtn1.Align := TAlignLayout.Client;
    LBtn1.Stretch := True;
    GridPanelLayout1.SetControl(LBtn1, 1, i);

    // 第i行第2列：Button2
    LBtn2 := TButton.Create(GridPanelLayout1);
    LBtn2.Text := 'Btn2 ' + IntToStr(i);
    LBtn2.Parent := GridPanelLayout1;
    LBtn2.Align := TAlignLayout.Client;
    LBtn2.Stretch := True;
    GridPanelLayout1.SetControl(LBtn2, 2, i);

    // 第i行第3列：Edit
    LEdit := TEdit.Create(GridPanelLayout1);
    LEdit.Text := 'Edit ' + IntToStr(i);
    LEdit.Parent := GridPanelLayout1;
    LEdit.Align := TAlignLayout.Client;
    LEdit.Stretch := True;
    GridPanelLayout1.SetControl(LEdit, 3, i);
  end;
end;

2. 调整GridPanelLayout列属性：在FMX设计器中，将GridPanelLayout1的每一列SizeStyle设置为ssPercent（比如每列设为25%，总和100%），确保窗口调整时列宽按比例拉伸。

验证结果 #

修改后，调整窗口大小，所有组的组件都会跟随列宽变化，保持与列的对齐状态。

内容的提问来源于stack exchange，提问作者Glen Morse