We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Column 容器
从上到下,纵向排列
示例:
Column() { Text('文字一') Text('文字二') Text('文字三') Text('文字四') Text('文字五') }
效果:
Row 容器
从左到右,横向排列
Row() { Text('文字一') Text('文字二') Text('文字三') Text('文字四') Text('文字五') }
在容器内部,元素排列是有方向的。Column 容器的元素是从上往下,垂直方向的排列;Row 容器的元素是从左往右,水平方向的排列。把容器内部元素排列方向上的这个轴线称之为主轴,把与主轴垂直的轴线称之为交叉轴,元素的对其方式就跟这两个轴有关系。除了对其以外,元素与元素之间还会有一定的间隔,称之为 Space,默认值是 0,也就是说默认情况下元素与元素之间是紧贴着的,在创建容器时可以对 Space 赋值,来改变容器的元素间隔。
主轴
交叉轴
Space
对齐方式
@Entry @Component struct Index { build() { Column({ space: 10 }) { Text('文字一') Text('文字二') Text('文字三') Text('文字四') Text('文字五') } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } }
FlexAlign 枚举(以 Column 容器为例)
HorizontalAlign 枚举(VerticalAlign 同理)
The text was updated successfully, but these errors were encountered:
No branches or pull requests
一、线性布局组件
Column 容器
示例:
效果:
![Column](https://private-user-images.githubusercontent.com/13990136/303895725-a75b1dce-cb62-4ffd-8aaf-e6219c4df83e.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNjU2MzksIm5iZiI6MTcyNjE2NTMzOSwicGF0aCI6Ii8xMzk5MDEzNi8zMDM4OTU3MjUtYTc1YjFkY2UtY2I2Mi00ZmZkLThhYWYtZTYyMTljNGRmODNlLmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDE4MjIxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFlYjNlZWNjMDVhOTgzYjZjZDU2ZmY2NDQ3MDc2Mzg2YjI5MTI0M2UyNDU1ZWY3NGQ1NmEyM2I0YWIwYzA4N2QmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ntq7iwy5xA6OaRemO2zmIIUHfLehHy7yxK4aEkFTAko)
Row 容器
示例:
效果:
![Row](https://private-user-images.githubusercontent.com/13990136/303895747-aaeacd1a-6db3-4bc5-a1c1-3dcc63a6ddb8.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNjU2MzksIm5iZiI6MTcyNjE2NTMzOSwicGF0aCI6Ii8xMzk5MDEzNi8zMDM4OTU3NDctYWFlYWNkMWEtNmRiMy00YmM1LWExYzEtM2RjYzYzYTZkZGI4LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDE4MjIxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTU3OTZhN2U4MzczNDU3ZDhkZjZlZWRiNDEyZDgyMDAzZjg2MWZjMjZiNGY4ZTMyMWUxMjNmMmMwNzJkMjk3OGUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.dk_QFQBLfbwBClKJqwCc38LUEo9iOdRat7vQe9wpLys)
二、常见布局属性
在容器内部,元素排列是有方向的。Column 容器的元素是从上往下,垂直方向的排列;Row 容器的元素是从左往右,水平方向的排列。把容器内部元素排列方向上的这个轴线称之为
主轴
,把与主轴垂直的轴线称之为交叉轴
,元素的对其方式就跟这两个轴有关系。除了对其以外,元素与元素之间还会有一定的间隔,称之为Space
,默认值是 0,也就是说默认情况下元素与元素之间是紧贴着的,在创建容器时可以对 Space 赋值,来改变容器的元素间隔。对齐方式
主轴
方向的对齐格式交叉轴
方向的对齐格式Column 容器使用 HorizontalAlign 枚举
示例:
效果:
![对齐方式](https://private-user-images.githubusercontent.com/13990136/303895790-0c534026-c414-48f0-8410-c3196de17296.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxNjU2MzksIm5iZiI6MTcyNjE2NTMzOSwicGF0aCI6Ii8xMzk5MDEzNi8zMDM4OTU3OTAtMGM1MzQwMjYtYzQxNC00OGYwLTg0MTAtYzMxOTZkZTE3Mjk2LmpwZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEyVDE4MjIxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU2ZGZmZmUzY2U0YTg0ZWY5MDYxYTQwMDNjZGQ0MGY4MGM2ZDJkMDQ0MWY2ZjY0MWMwNTJmZTU5YTZlMGE1ZTgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.LF5XRPlHa-kex6EujRM_HJ40kmnEXkVmAGfMqsOMmXg)
FlexAlign 枚举(以 Column 容器为例)
HorizontalAlign 枚举(VerticalAlign 同理)
The text was updated successfully, but these errors were encountered: