简约网站版式官方网站建设的目标

width（‘100%’）可以通过这样实现百分比

1.反引号  英文输入法状态下  ESC底下 直接可以打出

反引号下是可以进行转义的

2.向外导出 俩种方式  按需和默认

import { MeiTuanHeader } from '../views/MeiTuanHeader';
import MeiTuanMain from '../views/MeiTuanMain';

3.线性布局   内容超出不会有滚动条

Column  从上往下 垂直排列 水平居中

Row 从左往右 垂直排列 水平居中

4

justifyContent(FlexAlign.Center)设置内部内容的   类似绝对布局

5.

@Entry
@Component
struct TestPage {@State message: string = 'Hello World';build() {Column() {Row() {Text("首页").fontColor(Color.White).fontSize(40)}.height(100).backgroundColor(Color.Red).width("100%").justifyContent(FlexAlign.Center)Column() {Text("我是有底线的").fontColor(Color.Red).fontSize(30).fontWeight(FontWeight.Bold)}.backgroundColor(Color.White).layoutWeight(1).width("100%").justifyContent(FlexAlign.End)// Row() {//   //方法1//   Text("")//     .width(60)//     .height(40)//     .backgroundColor(Color.White)//     .layoutWeight(1)//     .margin(10)//   Text("")//     .width(60)//     .height(40)//     .backgroundColor(Color.White)//     .layoutWeight(1)//     .margin(10)//   Text("")//     .width(60)//     .height(40)//     .backgroundColor(Color.White)//     .layoutWeight(1)//     .margin(10)//// }.width("100%").height(100).backgroundColor(Color.Red)//方法2Row({ space: 10 }) {Text("").width(80).height(40).backgroundColor(Color.White)Text("").width(80).height(40).backgroundColor(Color.White)Text("").width(80).height(40).backgroundColor(Color.White)}.width("100%").height(100).backgroundColor(Color.Red).justifyContent(FlexAlign.Center)}.width("100%").height("100%")}
}

两种方法

 6.侧轴的相对布局 类似

alignSelf(ItemAlign.)

7.justifyContent()的不同效果

用ROW 和 Column 同时包裹布局 就会内居中

 Row() {Column() {}.width("100%")}.height("100%")

第三个效果为流式布局

Flex布局 可以在布局超出的时候换行 重新排  但是重排重绘 对性能影响比较大 主要是重排

{}里边一般是放参数