Article directory
I. Introduction
- Description: Building layout is the basis of UI interface development. How to make the interface look elegant and concise? Don't get lost when editing a program? All are inseparable from a good layout idea and habits .
- Difficulty: Easy
- Task:
- 1. Understand linear layout Row/Column, cascading layout Stack, flexible layout Flex, and relative layout RelativeContainer .
- 2. Practice with some released software in your life.
2. Build the layout
1. Linear layout (Row/Column)
If there are multiple sub-elements in the layout and they can be arranged linearly in some way, this layout will be given priority.
(1) Task
As shown below, this is the personal center of a certain shopping software. Then you need to use a linear layout to design its underlying template, and the standard is the number represented in the picture.
(2) Realization
Horizontal layout (Row)
For vertical layout (Column), I prefer to use an adapter (Adapter) for implementation here . ArkUI also provides component methods. For the sake of proposition, the requirements should be processed according to the requirements.
(3) Code
Horizontal layout (Row)
@Entry
@Component
struct Index {
build(){
// 线性布局
Row(){
Column({
space: 10 }) {
Text('横向布局(基础)').fontSize(15).fontColor(Color.Black).width('90%')
Row().width('98%').height(100).backgroundColor(0xddffdd).borderRadius(15)
Row().width('98%').height(100).backgroundColor(0xddffdd).borderRadius(15)
Row().width('98%').height(180).backgroundColor(0xddffdd).borderRadius(15)
}.width('100%').padding(5)
}
}
}
Vertical layout (Column)
@Entry
@Component
struct Index {
build(){
// 线性布局
Row(){
Column({
space: 10 }) {
Text('横向布局(基础)').fontSize(15).fontColor(Color.Black).width('90%')
Row({
space:10 }){
Column({
space:10}){
Text('纵向布局').fontSize(12).fontColor(Color.Black).margin({
left:20})
Row(){
Row().width(50).height(50).backgroundColor(0xF5DEB3).margin({
left:20})
Row().width(50).height(50).backgroundColor(0xD2B48C).margin({
left:10})
Row().width(50).height(50).backgroundColor(0xF5DEB3).margin({
left:10})
}
}.alignItems(HorizontalAlign.Start)
}.width('98%').height(100).backgroundColor(0xddffdd).borderRadius(15)
Row().width('98%').height(100).backgroundColor(0xddffdd).borderRadius(15)
Row().width('98%').height(180).backgroundColor(0xddffdd).borderRadius(15)
}.width('100%').padding(5)
}
}
}
2. Stack layout (Stack)
This layout is given priority when components need to have a stacking effect. The stacking effect of the stacked layout will not occupy or affect the layout space of other sub-components in the same container.
(1) Task
As shown below, this is a picture of my mobile phone interface application, so how do we achieve the cascading effect of the smallest pictures (taking Tao as an example). Of course, the normal design must be the adapter + container idea.
(2) Realization
The icon I designed is a bit big. Logically, there should be three icons in a row in a container. If I design three icons, will it exceed the inside of the container? This requires learning the flexible layout (flex) that follows.
(3) Code
@Entry
@Component
struct Index {
build(){
Column(){
Stack({
alignContent: Alignment.TopStart }) {
Image($r('app.media.beijin')).width('100%').height('100%')
Column(){
}.width(150).height(150).margin({
left:10,top:50 })
.backgroundColor('#80dfe5ef').borderRadius(20)
Image($r('app.media.tao')).width(50).height(50).margin({
left:20,top:60 })
.backgroundColor('#ffff5001').borderRadius(10)
}.width('100%').height('100%')
}
}
}
3. Flexible layout (Flex)
Flexible layout is a layout method similar to linear layout. The difference is that elastic layout can compress or stretch child components by default. This layout is used first when subcomponents need to calculate the stretching or compression ratio, so that subcomponents in multiple containers can have a better visual filling effect of the container.
(1) Task
Like the content in the red box , use flexible layout to generate multiple APPs in the container (simulation)
(2) Realization
(3) Code
@Entry
@Component
struct Index {
private arr: string[] = ['APP1', 'APP2', 'APP3', 'APP4', 'APP5'];
build(){
Column(){
Stack({
alignContent: Alignment.TopStart }) {
Image($r('app.media.beijin')).width('100%').height('100%')
Column(){
Flex({
wrap: FlexWrap.Wrap }) {
ForEach(this.arr, (item) => {
Text(item)
.width(35)
.height(35)
.fontSize(8)
.margin(5)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}, item => item)
}.width('100%').height('100%').margin({
left:10,top:10 })
}.width(150).height(150).margin({
left:10,top:50 })
.backgroundColor('#80dfe5ef').borderRadius(20)
}.width('100%').height('100%')
}
}
}
4. Relative layout (RelativeContainer)
Relative layout is a layout method in a two-dimensional space. It does not need to follow the rules of linear layout and the layout method is more free. By setting anchor rules (AlignRules) on the subcomponent, the subcomponent can align its position in the horizontal axis and vertical axis with the position of the container or other subcomponents within the container. The set anchor point rules can naturally support the compression, stretching, stacking or multi-line effect of sub-elements. It is recommended to use it when the distribution of page elements is complex or when the linear layout will make the nesting level of the container too deep.
(1) Task
Position the name relatively below the container
(2) Realization
(3) Code
@Entry
@Component
struct Index {
private arr: string[] = ['APP1', 'APP2', 'APP3', 'APP4', 'APP5'];
build(){
Column(){
Stack({
alignContent: Alignment.TopStart }) {
Image($r('app.media.beijin')).width('100%').height('100%')
Column(){
Flex({
wrap: FlexWrap.Wrap }) {
ForEach(this.arr, (item) => {
Text(item)
.width(35)
.height(35)
.fontSize(8)
.margin(5)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}, item => item)
}.width('100%').height('100%').margin({
left:10,top:10 }).id('row')
// 将命名定位在容器下面
Row() {
Text('应用')
}.alignRules({
top: {
anchor: 'row', align: VerticalAlign.Bottom },
})
}.width(150).height(150).margin({
left:10,top:50 })
.backgroundColor('#80dfe5ef').borderRadius(20)
}.width('100%').height('100%')
}
}
}
5. Grid layout
Regarding the grid layout, it is mainly suitable for horizontal and vertical screens, which involves later compatibility issues. I will not write about it here for the actual display in subsequent projects.