【主从表】head管理页面的布局设计教程

成品效果图

整体由3个部分组成，搜索条件面板、功能按钮面板、数据面板

详细设计步骤如下

• 在窗体中放入2个原生panel

• 设置第一个panel的Dock属性为Top、Size.Height属性为50
• 设置第一个panel的Dock属性为Botton、Size.Height属性为50

设计后的效果如下

• 在中间空白位置拖放一个toyaGridControl，并设置Dock属性为Fill

• 在底部的面板中放入ToyaSimpleButton、设置Text属性为审核、设置Location属性为（10，10）、Size.Width属性为70

• 底部面板中有多个功能按钮的话，直接拷贝第一个按钮进行拖放布局即可

• 在上面板中拖放一个toyaLabelControl，设置属性Size.Width属性为70，设置Location属性为（10，10），设置Text属性为托运日期

• 在上面中拖放一个toyaSearchPopEdit，注意布局线即可

• toyaSearchPopEdit中自带开始日期，结束日期，通用查询选项、查询按钮，可直接通过公共字段访问。txt开头
• toyaSearchPopEdit在设计页面中需要注意popupContainerControl属性（用于配置搜索明细）和ButtonClick事件（点击查询触发的事件）
  

至此即可完成Head部分的UI设置，实际环境中的效果图如下