FireMonkey项目中如何用TVertScrollBox实现TFlowLayout垂直滚动？

Hey there! I’ve dealt with this exact frustration a bunch of times when building FMX apps—getting a scrollable FlowLayout seems straightforward, but it’s easy to miss a key setting that breaks the scrolling. Let’s break down the step-by-step fixes that always work for me:

1. Get the Nesting Right First #

First off, make sure your component hierarchy is correct:

• Parent: TVertScrollBox (aligned to Client so it fills your form/container)
• Child: TFlowLayout (this should be the only direct child of the ScrollBox—extra nested containers can complicate layout calculations)

2. Configure the TFlowLayout Critical Properties #

This is where most people trip up. The FlowLayout needs to expand with its content so the ScrollBox knows there’s something to scroll:

• Set Align to Top (not Client—Client will lock the FlowLayout to the ScrollBox’s visible area, preventing it from growing beyond that)
• Turn on AutoSize (set to True)—this makes the FlowLayout automatically adjust its height to fit all its child controls
• Ensure WrapContents is True (so controls wrap to the next line when they hit the FlowLayout’s width, which inherits from the ScrollBox)

3. Tweak the TVertScrollBox Settings #

Double-check these to make sure scrolling is enabled:

• Set Align to Client (so the ScrollBox takes up the available space in its parent)
• Set VertScrollBar.Visible to True (or Auto if you want it to only show when needed)
• Confirm VertScrollBar.Enabled is True (it’s enabled by default, but it’s worth verifying)

4. Refresh Layout After Dynamic Changes #

If you’re adding/removing controls to the FlowLayout via code, you need to force a layout refresh so the ScrollBox recognizes the new content size:

// After adding/removing controls:
FlowLayout1.UpdateStyle;
VertScrollBox1.UpdateScroll;

Quick Example Code #

Here’s a snippet to set this up in code (you can also configure all this directly in the Form Designer):

procedure TMainForm.FormCreate(Sender: TObject);
var
  i: Integer;
  NewBtn: TButton;
begin
  // Setup ScrollBox
  VertScrollBox1.Align := TAlignLayout.Client;
  VertScrollBox1.VertScrollBar.Visible := True;

  // Setup FlowLayout
  FlowLayout1.Parent := VertScrollBox1;
  FlowLayout1.Align := TAlignLayout.Top;
  FlowLayout1.AutoSize := True;
  FlowLayout1.WrapContents := True;
  FlowLayout1.Padding.Left := 10;
  FlowLayout1.Padding.Top := 10;
  FlowLayout1.Spacing := 8;

  // Add sample buttons to test scrolling
  for i := 1 to 25 do
  begin
    NewBtn := TButton.Create(FlowLayout1);
    NewBtn.Parent := FlowLayout1;
    NewBtn.Text := 'Item ' + IntToStr(i);
    NewBtn.Width := 180;
    NewBtn.Height := 45;
  end;

  // Force layout update to ensure scrolling works
  FlowLayout1.UpdateStyle;
  VertScrollBox1.UpdateScroll;
end;

Common Mistakes to Avoid #

• Don’t set a fixed Height on the FlowLayout: This locks its size, so even if content overflows, the ScrollBox won’t detect it
• Don’t align the FlowLayout to Client: This makes it match the ScrollBox’s visible height, so no scrolling triggers even if content spills over
• Don’t over-nest containers: Each extra layer adds more opportunities for layout constraints to break scrolling behavior

That should get your scrollable FlowLayout working perfectly!

内容的提问来源于stack exchange，提问作者Abdullah Ilgaz