鸿蒙Column,Row,线性布局,Text组件的详细说明
组件
今天是发布鸿蒙的第1篇文章。别人五一出去旅游，我五一学鸿蒙。
下面我我们主要讲一下：Column,Row,Text组件
容器组件：Column(列)、Row(行)
列组件的排列方式：从上到下排序。行组件的排列从左到右进行排列
文本组件：Text
特别：注意鸿蒙中的组件默认都是首字母大写的哈
1行2列
@Entry
@Component
struct Index {
@State message: string = '开始学习鸿蒙了';
build() { // 表示开始进行构建界面
Row(){ // 行
Column() { // 列
Text('吞噬星空')
}
Column(){ // 列
Text('罗峰')
Text('徐昕')
}
}
}
}
build下只能有一个子组件
@Entry
@Component
struct Index {
// 现在build中有2个组件，这样会报错的。
build() { // 表示开始进行构建界面
Column(){
Row() {
Text('吞噬星空')
}
}
Column(){
}
}
}
报错信息：
In an '@Entry' decorated component,
the 'build' function can have only one root node, which must be a container component.
Column列中的子元素默认是水平居中的
@Entry
@Component
struct Index {
build() { // 表示开始进行构建界面
Column(){ //Column(列) 使用之后，里面的元素默认是水平居中的
//行中设置一个文本内容
Row() {
Text('吞噬星空')
}
Row(){
Text('罗峰')
Text('徐昕')
Text('姑妈')
Text('秃鹫')
Text('路人')
Text('路人2')
Text('路人3')
}
// 给这个列设置背景颜色
}.backgroundColor("#ccc").width('100%')
}
}
如何让Column下的子元素左对齐
Column会让里面的子元素(Text,Row)水平居中。
如果我想让他们左对齐怎么操作:
给Column下的子组件Row设置宽度，如设置100%
@Entry
@Component
struct Index {
build() { // 表示开始进行构建界面
Column(){ //Column(列) 使用之后，里面的元素默认是水平居中的
// 行中设置一个文本内容
Row() {
Text('吞噬星空')
}.width('100%')
Row(){
Text('罗峰')
Text('徐昕')
Text('姑妈')
Text('秃鹫')
Text('路人')
Text('路人2')
Text('路人3')
}.width('100%')
}
}
}
Row和Text的相关属性(宽,高,字体大小,加粗,颜色)
Column和Row常用的属性有：宽,高，背景色backgroundColor
@Entry
@Component
struct Index {
build() { // 表示开始进行构建界面
Column(){ //Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
//行中设置一个文本内容
Row() {
// Text设置宽度后不会默认居中了。不设置会默认居中
// 关于fontWeight，数值100-900(100的整数倍) 加粗是700 默认是400
Text('吞噬星空').fontSize(20).fontWeight(700)
}.width('100%').height(40)
Row(){
Text('罗峰').width(50).height(30).backgroundColor(Color.Pink)
Text('徐昕').width(50).height(30).backgroundColor(Color.Orange)
Text('姑妈').width(50).height(30).backgroundColor(Color.Red)
Text('秃鹫').width(50).height(30).backgroundColor(Color.Green)
}.width('100%')
// 给这个列设置背景颜色,列宽100%(铺满整个屏幕)
}.backgroundColor("#ccc").width('100%')
}
}
Text常用的属性
宽,高,背景色backgroundColor,
字体加粗fontWeight:数值100-900(100的整数倍)
行高：lineHeight(22) lineHeight(value: number | string | Resource)
number类型时单位为fp。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。
fontSize设置字体大小
如果想看Text组件的详细属性。可以访问：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-text#示例1设置文本布局
设置文本超长显示方式的注意点
textOverflow(value: { overflow: TextOverflow })
当overflow设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时,需配合maxLines使用，单独设置不生效。
设置TextOverflow.None与TextOverflow.Clip效果一样
maxLines:设置文本的最大行数
maxLines:设置文本的最大行数。
默认情况下，文本是自动折行的，如果指定此属性，则文本最多不会超过指定的行。
可以通过textOverflow来指定截断方式。
lineHeight(value: number | string | Resource):设置文本的文本行高
lineHeight:设置文本的文本行高。
设置值不大于0时，不限制文本行高，自适应字体大小。
number类型时单位为fp。string类型支持number类型取值的字符串形式，可以附带单位，例如"10"、"10fp"。
Text超出显示省略号
@Entry
@Component
struct Index {
build() { // 表示开始进行构建界面
Column(){ // Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
//行中设置一个文本内容
Row() {
Text('HarmonyOS SDK').width('100%').height(40).fontSize(20).fontWeight(700)
}
Row() {
Text('HarmonyOS SDK 是面向鸿蒙应用和元服务开发的开放能力合集，提供包括应用框架、应用服务、系统、AI、媒体，带来创新易用的全场景体验。')
.width('100%')
.lineHeight(22)
// 文本超出2行显示省略号
.textOverflow({
overflow: TextOverflow.Ellipsis
}).maxLines(2)
}
}
}
}
还可以这样写，1列中放置2个Text文本，使用width('100%')让他们换行
@Entry
@Component
struct Index {
build() { // 表示开始进行构建界面
Column(){ // Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
//行中设置一个文本内容
Text('HarmonyOS SDK').width('100%').height(40).fontSize(20).fontWeight(700)
Text('HarmonyOS SDK 是面向鸿蒙应用和元服务开发的开放能力合集，提供包括应用框架、应用服务、系统、AI、媒体，带来创新易用的全场景体验。')
.width('100%')
.lineHeight(22)
// 文本超出2行显示省略号
.textOverflow({
overflow: TextOverflow.Ellipsis
}).maxLines(2)
}
}
}
总结:2个Text组件可以直接放在一起，设置宽度100%。这样他们会进行换行。
文字超出1行裁剪(不显示省略号)
@Entry
@Component
struct Index {
build() { // 表示开始进行构建界面
Column(){ // Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
//行中设置一个文本内容
Row() {
Text('HarmonyOS SDK').width('100%').height(40).fontSize(20).fontWeight(700)
}
Row() {
Text('HarmonyOS SDK 是面向鸿蒙应用和元服务开发的开放能力合集，提供包括应用框架、应用服务、系统、AI、媒体，带来创新易用的全场景体验。')
.width('100%')
.lineHeight(22)
// 文本超出1行的内容直接裁剪掉(用的少)
.textOverflow({
// 还可以使用 overflow: TextOverflow.None 他们的效果是一样的
overflow: TextOverflow.Clip
}).maxLines(1)
}
}
}
}
单行从右向左滚动
@Entry
@Component
struct Index {
build() { // 表示开始进行构建界面
Column(){ // Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
//行中设置一个文本内容
Row() {
Text('HarmonyOS SDK').width('100%').height(40).fontSize(20).fontWeight(700)
}
Row() {
Text('HarmonyOS SDK 是面向鸿蒙应用和元服务开发的开放能力合集，提供包括应用框架、应用服务、系统、AI、媒体，带来创新易用的全场景体验。')
.width('100%')
.lineHeight(22)
// 单行从右向左滚动，此时maxLines属性就不需要了
.textOverflow({
overflow: TextOverflow.MARQUEE
})
}
}
}
}
当overflow设置为TextOverflow.MARQUEE时，文本在一行内滚动显示，设置maxLines及copyOption属性均不生效。
在文本不可滚动时，设置textAlign属性生效； 在文本可滚动时，设置textAlign属性不生效。
在跑马灯模式下，Text组件clip属性默认为true。属性字符串的CustomSpan不支持跑马灯模式。
textAlign:设置文本段落在水平方向的对齐方式。
textAlign(TextAlign.End) 默认，左对齐
textAlign(TextAlign.Center) 居中对齐
textAlign(TextAlign.End) 右对齐
两端对齐如下:
textAlign(TextAlign.JUSTIFY) 两端对齐，需配合wordBreak属性，最后一行左对齐。
decoration 设置文本装饰线样式及其颜色。
Text("镇魂街").width('100%').fontSize(20).decoration({
type: TextDecorationType.Underline, //设置显示下划线
color: Color.Pink,
style: TextDecorationStyle.SOLID // SOLID实线、你可以调整线样式
})
如何设置下划线距离文本的距离呢？
鸿蒙并没有直接提供这样的API
但是我们可以间接的来实现这个需求
import { LengthUnit } from '@kit.ArkUI'
@Entry
@Component
struct Index {
build() { // 表示开始进行构建界面
Column(){ // Column(列) 使用之后，里面的元素默认是水平居中的，解决办法子元素设置 width
Text("镇魂街").width('100%').fontSize(20).decoration({
type: TextDecorationType.Underline, //设置显示下划线
color: Color.Pink, // 下划线的颜色
style: TextDecorationStyle.SOLID // SOLID实线、你可以调整线样式
}).lineSpacing({ value:62, unit:LengthUnit.VP})
// 这个是一个方式，但是设置了之后会对text得高有影响
}
}
}
线性布局
线性布局(LinearLayout)通过线性容器 Column 和 Row 创建。
Row 容器:子元素 水平方向 排列，我们通常叫做行列元素
Column 容器:子元素，垂直方向排列，我们通常叫做：列元素
特别注意：如果最大的容器是Row，我们的主轴就是Row。如果最大的容器是Column，我们的主轴就是Column。
build下只能有一个子元素。这个子元素就是我们的主轴
justifyContent是设置主轴(垂直方向 || 水平方向)上的对齐方式，它的取值一般有下面这几个值
FlexAlign.End 在最末端;
FlexAlign.Center在中间;
FlexAlign.Start在最起始位置；
FlexAlign.SpaceBetween 两端紧挨着，中间均匀分布。与css3的一样。
FlexAlign.SpaceAround 两端有一点间距(0.5)，中间间距(1)均匀分布。与css3的一样。
FlexAlign.SpaceEvenly 间隙是均匀的。
主轴为列Column,元素两端紧挨着，中间均匀分布。
在使用justifyContent的时候时候，我们一般让主轴的空间是100%。
@Entry
@Component
struct Index {
build() {
Column() {
Row() {
Text("第1个").width('100%').height(100).fontColor('#fff').backgroundColor(Color.Pink)
}
Row() {
Text("第2个").width('100%').height(100).fontColor('#fff').backgroundColor(Color.Pink)
}
Row() {
Text("第3个").width('100%').height(100).fontColor('#fff').backgroundColor(Color.Pink)
}
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}
}
主轴为列Column,元素两端紧挨着，中间均匀分布。
@Entry
@Component
struct Index {
build() {
Column() {
Row() {
Text("第1个").width('100%').height(100).fontColor('#fff').backgroundColor(Color.Pink)
}
Row() {
Text("第2个").width('100%').height(100).fontColor('#fff').backgroundColor(Color.Pink)
}
Row() {
Text("第3个").width('100%').height(100).fontColor('#fff').backgroundColor(Color.Pink)
}
}.width('100%').height('100%').justifyContent(FlexAlign.SpaceBetween)
}
}
主轴为行Row,元素显示在末端。
@Entry
@Component
struct Index {
build() {
Row() {
Text("第1个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Pink)
Text("第2个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Black)
Text("第3个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Brown)
}.width('100%').justifyContent(FlexAlign.End) // 在末端
}
}
主轴为行Row,元素均匀分布
@Entry
@Component
struct Index {
build() {
Row() {
Text("第1个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Pink)
Text("第2个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Black)
Text("第3个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Brown)
}.width('100%').justifyContent(FlexAlign.SpaceEvenly) // 间隙是均匀的
}
}
主轴为行Row,两端有一点间距(0.5)，中间间距(1)均匀分布
@Entry
@Component
struct Index {
build() {
Row() {
Text("第1个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Pink)
Text("第2个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Black)
Text("第3个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Brown)
}.width('100%').justifyContent(FlexAlign.SpaceAround) // FlexAlign.SpaceAround 两端有一点间距(0.5)，中间间距(1)均匀分布。与css3的一样。
}
}
实现小红书顶部的简陋效果
@Entry
@Component
struct Index {
build() {
Column() {
Row(){
Image($r('app.media.more')).width(22)
Row(){
Text('关注').margin({ right: 5})
Text('发现').margin({ right: 5})
Text('附近').margin({ right: 5})
}
Image($r('app.media.search')).width(22)
}.width('100%').height(40)
.justifyContent(FlexAlign.SpaceBetween)
.padding({left:10, right:10})
}
}
}
// 我们想让元素在Row中两端对齐，中间均匀分布.前提是:需要让主轴宽度设置为100%；width('100%')
// 使用justifyContent(FlexAlign.SpaceBetween)后，如果我们想要让两端有间距，可以使用.padding({left:10, right:10})
// 图标使用Image($r('app.media.more'))引入后，默认是显示图标实际的大小，因此需要给图标设置width
交叉轴的对齐方式
交叉轴：交叉轴就是和主轴垂直的那个方向。
需要注意：我们在设置交叉轴的时候
如：Column的交叉轴水平向右，我们需要设置Column().width('100%')
下面是水平向右的交叉轴的取值
HorizontalAlign.Start 居左
HorizontalAlign.Center 居中
HorizontalAlign.End 居右
如：Row的交叉轴垂直往下，，我们需要设置Column().height('100%')
垂直往下的交叉轴的取值
VerticalAlign.Top 顶部
VerticalAlign.Center 居中
VerticalAlign.Bottom 底部
Column的交叉轴水平向右：alignItems(HorizontalAlign.Start) 居左
@Entry
@Component
struct Index {
build() {
Column() {
Text("第1个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Pink)
Text("第2个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Black)
Text("第3个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Brown)
}.height('100%').width('100%').alignItems(HorizontalAlign.Start)
}
}
Column的交叉轴水平向右：alignItems(HorizontalAlign.Center) 居中
@Entry
@Component
struct Index {
build() {
Column() {
Text("第1个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Pink)
Text("第2个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Black)
Text("第3个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Brown)
}.height('100%').width('100%').alignItems(HorizontalAlign.Center)
}
}
Column的交叉轴水平向右：alignItems(HorizontalAlign.End) 居右
@Entry
@Component
struct Index {
build() {
Column() {
Text("第1个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Pink)
Text("第2个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Black)
Text("第3个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Brown)
}.height('100%').width('100%').alignItems(HorizontalAlign.End)
}
}
Row的交叉轴：垂直往下的方向上：顶部
@Entry
@Component
struct Index {
build() {
Row() {
Text("第1个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Pink)
Text("第2个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Black)
Text("第3个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Brown)
}.height('100%').alignItems(VerticalAlign.Top)
}
}
Row的交叉轴：垂直往下的方向上：居中
@Entry
@Component
struct Index {
build() {
Row() {
Text("第1个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Pink)
Text("第2个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Black)
Text("第3个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Brown)
}.height('100%').alignItems(VerticalAlign.Center)
}
}
Row的交叉轴：垂直往下的方向上：底部
@Entry
@Component
struct Index {
build() {
Row() {
Text("第1个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Pink)
Text("第2个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Black)
Text("第3个").width(100).height(100).fontColor('#fff').backgroundColor(Color.Brown)
}.height('100%').alignItems(VerticalAlign.Bottom)
}
}
自适应布局
自适应布局：设置 layoutWeight属性的元素，将会与兄弟元素按照权重进行分配主轴剩余的空间。
或者说：自适应布局会先把固定空间排列好，剩下的空间会按照权重来进行分配
语法是：组件.layoutWeight(数字)
自适应布局:1行3列的效果
@Entry
@Component
struct Index {
build() {
Column() {
Row(){
Column(){
Row(){
Text('玩一玩').fontSize(22).fontWeight(600)
}.width('100%')
Row(){
Text('签到兑礼').margin({right:5})
Text('超多大奖').margin({right:5})
Text('超好玩').margin({right:5})
}.width('100%')
}.layoutWeight(1)
Column(){
Image($r('app.media.hongmeng')).width(70).height(70).backgroundImageSize(ImageSize.Cover)
}.margin({right:10})
Column(){
Image($r('app.media.right')).width(20)
}
}.width('100%').height(80).backgroundColor(Color.Pink).padding({left:4, right:4})
}
}
}
出处：https://www.cnblogs.com/ishoulgodo/
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！
如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！
万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！
想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！
如果文中有什么错误，欢迎指出。以免更多的人被误导。
浙公网安备 33010602011771号