布局控件 FlowLayoutPanel

布局控件通常以 LayoutPanel 为后缀。

FlowLayoutPanel 是流布局控件，放置在它内部的子控件会按照流水方式自动排列，可以横向排列也可以纵向排列。

基本使用

在工具箱中找到 FlowLayoutPanel，拖动到窗体上。可以将其 Dock 属性设为 Fill 使其占满父容器。

此时向其中拖动其他控件（如 Button、Label 等），控件会自动按照流水方向依次排列。

设置排列方向

通过设置 FlowDirection 属性可以改变流水方向：

值	说明
LeftToRight	从左到右排列（默认）
TopDown	从上到下排列
RightToLeft	从右到左排列
BottomUp	从下到上排列

this.flowLayoutPanel1.FlowDirection = FlowDirection.TopDown;Code language: JavaScript (javascript)

设置为 TopDown 后，内部控件会从上往下依次排列。

换行控制

属性	说明
WrapContents	是否允许换行/换列，设为 false 则单行/单列显示不换行

this.flowLayoutPanel1.WrapContents = false; // 禁止换行Code language: JavaScript (javascript)

布局控件嵌套

布局控件可以嵌套使用，例如在 FlowLayoutPanel 内部再放入一个 FlowLayoutPanel，实现更复杂的界面布局。

FlowLayoutPanel outer = new FlowLayoutPanel();
outer.Dock = DockStyle.Fill;
outer.FlowDirection = FlowDirection.LeftToRight;

FlowLayoutPanel inner = new FlowLayoutPanel();
inner.FlowDirection = FlowDirection.TopDown;
inner.Size = new Size(120, 200);

inner.Controls.Add(new Button() { Text = "按钮1", Width = 100 });
inner.Controls.Add(new Button() { Text = "按钮2", Width = 100 });

outer.Controls.Add(inner);
outer.Controls.Add(new Label() { Text = "右侧内容", AutoSize = true });

this.Controls.Add(outer);Code language: JavaScript (javascript)

常用属性

属性	说明
FlowDirection	子控件的排列方向
WrapContents	是否自动换行
Dock	停靠方式
Padding	内边距
AutoScroll	内容超出时是否显示滚动条