网站开发相关知识,网站首页按钮图片,跨境购网站建设,新闻html网页设计代码范文初学不要太复杂#xff0c;先做一个结构简单的#xff0c;大致规划一下功能分区#xff0c;绘制草图#xff1a; 最终的效果#xff1a; 界面主要由顶边栏、侧边栏、内容区构成。顶边栏左边是logo#xff0c;右边是时钟显示。侧边栏最上边是切换按钮#xff0c;用以动画…初学不要太复杂先做一个结构简单的大致规划一下功能分区绘制草图 最终的效果 界面主要由顶边栏、侧边栏、内容区构成。顶边栏左边是logo右边是时钟显示。侧边栏最上边是切换按钮用以动画切换功能按钮的缩略显示和全部显示。
一、创建QMainWindow命名为demo.ui 二、移除菜单栏和状态栏 三、 将自带的QWidget命名为baseWidget 这是所有的部件的基底界面。 四、 在baseWidget上放置一个QFrame命名为appFrame这个QFrame就是软件的显示主界面。 五、再放置四个QFrame分别命名为leftFrame左边栏、topFrame顶边栏、mainContent显示内容主区、contentBox内容区。内容区由左边栏和显示内容主区组成是软件的主要操作和显示区。 六、逐一设计布局和部件结构从顶边栏开始 1、在topFrame顶边栏放置三个QFrame从左至右分别命名为topLogo、topContent、topTimeShow。 2、顶边栏的属性设置将最大和最小高度全部设置为50 3、topLogo的属性最大和最小宽高均设尺寸为30*30 4、topContent的属性最大和最小高度全部设置为50 5、topTimeShow的属性最大和最小宽高尺寸全部设置为200*50 6、右键点击topFrame顶边栏布局--水平布局。并在属性中将边距全部设为0 。 7、右键点击topLogo布局对齐--左侧。 8、同样的方法 设置topTimeShow布局对齐--右侧。
七、leftFrame左边栏的布局 1、leftFrame左边栏放置三个QFrame从上到下分别命名为left_toggleBox、left_buttonsBox、left_bottomBox。 2、leftFrame左边栏的属性设置将最小宽度设置为50。 3、left_buttonsBox的属性设置将最小宽度设置为50。 4、left_toggleBox、left_bottomBox的属性设置最小宽度设置为50最小和最大高度均设为50。 5、右键点击leftFrame左边栏布局--垂直布局。并在属性中将边距全部设为0 。 6、右键点击left_buttonsBox布局对齐--顶部。注意顶部的不是left_toggleBox虽然它在最上边。将位于中间的left_buttonsBox设为顶部它就不会自动居中而是随着尺寸的增长从上向下延伸。 7、右键点击left_bottomBox布局对齐--底部。
八、contentBox内容区的布局 1、将leftFrame左边栏和mainContent显示内容主区拖入contentBox内容区。 2、右键点击contentBox内容区布局--水平布局。并在属性中将边距全部设为0 。 3、 右键点击leftFrame布局对齐--左侧。 4、在mainContent显示内容主区属性设置里将其水平策略设置为expanding。
九、appFrame显示主界面的布局 1、将topFrame和contentBox拖入appFrame显示主界面 2、右键点击appFrame显示主界面布局--垂直布局。并在属性中stretch设为0其余保持默认 。 3、 右键点击topFrame布局对齐--顶部。 4、在contentBox内容区属性设置里将其垂直策略设置为expanding。
十、整体的布局 右键点击MainWindow布局--垂直布局。 至此完成了布局的基本框架设计软件的显示主界面appFrame已经自动布满了QMainWindow而且当拖动改变QMainWindow的尺寸时appFrame也就是软件的显示主界面也随之改变。这就是使用布局的好处它会自动调整相对的尺寸使软件界面能够适应不同的屏幕分辨率。
