1# 验证废弃文档中的代码段检测 2 3> **说明:** 4> 5> 6> - 从API version 9开始,该接口不再维护, 7 8## js代码段 9 10代码段-js: 11 12**示例:** 13 14```js 15// js代码段: 16// xxx.ets 17@Entry 18@Component 19struct GridContainerExample { 20 @State sizeType: SizeType = SizeType.XS 21 22 build() { 23 Column({ space: 5 }) { 24 GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { 25 Row() { 26 Text('1') 27 .useSizeType({ 28 xs: { span: 6, offset: 0 }, 29 sm: { span: 2, offset: 0 }, 30 md: { span: 2, offset: 0 }, 31 lg: { span: 2, offset: 0 } 32 }) 33 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 34 Text('2') 35 .useSizeType({ 36 xs: { span: 2, offset: 6 }, 37 sm: { span: 6, offset: 2 }, 38 md: { span: 2, offset: 2 }, 39 lg: { span: 2, offset: 2 } 40 }) 41 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 42 Text('3') 43 .useSizeType({ 44 xs: { span: 2, offset: 8 }, 45 sm: { span: 2, offset: 8 }, 46 md: { span: 6, offset: 4 }, 47 lg: { span: 2, offset: 4 } 48 }) 49 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 50 Text('4') 51 .useSizeType({ 52 xs: { span: 2, offset: 10 }, 53 sm: { span: 2, offset: 10 }, 54 md: { span: 2, offset: 10 }, 55 lg: { span: 6, offset: 6 } 56 }) 57 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 58 } 59 }.width('90%') 60 61 Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) 62 Row() { 63 Button('XS') 64 .onClick(() => { 65 this.sizeType = SizeType.XS 66 }).backgroundColor(0x317aff) 67 Button('SM') 68 .onClick(() => { 69 this.sizeType = SizeType.SM 70 }).backgroundColor(0x317aff) 71 Button('MD') 72 .onClick(() => { 73 this.sizeType = SizeType.MD 74 }).backgroundColor(0x317aff) 75 Button('LG') 76 .onClick(() => { 77 this.sizeType = SizeType.LG 78 }).backgroundColor(0x317aff) 79 } 80 }.width('100%').margin({ top: 5 }) 81 } 82} 83``` 84 85## ts代码段 86 87代码段-ts: 88 89**示例:** 90 91```js 92// js代码段: 93// xxx.ets 94@Entry 95@Component 96struct GridContainerExample { 97 @State sizeType: SizeType = SizeType.XS 98 99 build() { 100 Column({ space: 5 }) { 101 GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { 102 Row() { 103 Text('1') 104 .useSizeType({ 105 xs: { span: 6, offset: 0 }, 106 sm: { span: 2, offset: 0 }, 107 md: { span: 2, offset: 0 }, 108 lg: { span: 2, offset: 0 } 109 }) 110 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 111 Text('2') 112 .useSizeType({ 113 xs: { span: 2, offset: 6 }, 114 sm: { span: 6, offset: 2 }, 115 md: { span: 2, offset: 2 }, 116 lg: { span: 2, offset: 2 } 117 }) 118 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 119 Text('3') 120 .useSizeType({ 121 xs: { span: 2, offset: 8 }, 122 sm: { span: 2, offset: 8 }, 123 md: { span: 6, offset: 4 }, 124 lg: { span: 2, offset: 4 } 125 }) 126 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 127 Text('4') 128 .useSizeType({ 129 xs: { span: 2, offset: 10 }, 130 sm: { span: 2, offset: 10 }, 131 md: { span: 2, offset: 10 }, 132 lg: { span: 6, offset: 6 } 133 }) 134 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 135 } 136 }.width('90%') 137 138 Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) 139 Row() { 140 Button('XS') 141 .onClick(() => { 142 this.sizeType = SizeType.XS 143 }).backgroundColor(0x317aff) 144 Button('SM') 145 .onClick(() => { 146 this.sizeType = SizeType.SM 147 }).backgroundColor(0x317aff) 148 Button('MD') 149 .onClick(() => { 150 this.sizeType = SizeType.MD 151 }).backgroundColor(0x317aff) 152 Button('LG') 153 .onClick(() => { 154 this.sizeType = SizeType.LG 155 }).backgroundColor(0x317aff) 156 } 157 }.width('100%').margin({ top: 5 }) 158 } 159} 160``` 161 162## JavaScript代码段 163 164代码段-JavaScript: 165 166**示例:** 167 168```JavaScript 169// js代码段: 170// xxx.ets 171@Entry 172@Component 173struct GridContainerExample { 174 @State sizeType: SizeType = SizeType.XS 175 176 build() { 177 Column({ space: 5 }) { 178 GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { 179 Row() { 180 Text('1') 181 .useSizeType({ 182 xs: { span: 6, offset: 0 }, 183 sm: { span: 2, offset: 0 }, 184 md: { span: 2, offset: 0 }, 185 lg: { span: 2, offset: 0 } 186 }) 187 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 188 Text('2') 189 .useSizeType({ 190 xs: { span: 2, offset: 6 }, 191 sm: { span: 6, offset: 2 }, 192 md: { span: 2, offset: 2 }, 193 lg: { span: 2, offset: 2 } 194 }) 195 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 196 Text('3') 197 .useSizeType({ 198 xs: { span: 2, offset: 8 }, 199 sm: { span: 2, offset: 8 }, 200 md: { span: 6, offset: 4 }, 201 lg: { span: 2, offset: 4 } 202 }) 203 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 204 Text('4') 205 .useSizeType({ 206 xs: { span: 2, offset: 10 }, 207 sm: { span: 2, offset: 10 }, 208 md: { span: 2, offset: 10 }, 209 lg: { span: 6, offset: 6 } 210 }) 211 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 212 } 213 }.width('90%') 214 215 Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) 216 Row() { 217 Button('XS') 218 .onClick(() => { 219 this.sizeType = SizeType.XS 220 }).backgroundColor(0x317aff) 221 Button('SM') 222 .onClick(() => { 223 this.sizeType = SizeType.SM 224 }).backgroundColor(0x317aff) 225 Button('MD') 226 .onClick(() => { 227 this.sizeType = SizeType.MD 228 }).backgroundColor(0x317aff) 229 Button('LG') 230 .onClick(() => { 231 this.sizeType = SizeType.LG 232 }).backgroundColor(0x317aff) 233 } 234 }.width('100%').margin({ top: 5 }) 235 } 236} 237``` 238 239## javascript代码段 240 241代码段-javascript: 242 243**示例:** 244 245```javascript 246// js代码段: 247// xxx.ets 248@Entry 249@Component 250struct GridContainerExample { 251 @State sizeType: SizeType = SizeType.XS 252 253 build() { 254 Column({ space: 5 }) { 255 GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { 256 Row() { 257 Text('1') 258 .useSizeType({ 259 xs: { span: 6, offset: 0 }, 260 sm: { span: 2, offset: 0 }, 261 md: { span: 2, offset: 0 }, 262 lg: { span: 2, offset: 0 } 263 }) 264 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 265 Text('2') 266 .useSizeType({ 267 xs: { span: 2, offset: 6 }, 268 sm: { span: 6, offset: 2 }, 269 md: { span: 2, offset: 2 }, 270 lg: { span: 2, offset: 2 } 271 }) 272 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 273 Text('3') 274 .useSizeType({ 275 xs: { span: 2, offset: 8 }, 276 sm: { span: 2, offset: 8 }, 277 md: { span: 6, offset: 4 }, 278 lg: { span: 2, offset: 4 } 279 }) 280 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 281 Text('4') 282 .useSizeType({ 283 xs: { span: 2, offset: 10 }, 284 sm: { span: 2, offset: 10 }, 285 md: { span: 2, offset: 10 }, 286 lg: { span: 6, offset: 6 } 287 }) 288 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 289 } 290 }.width('90%') 291 292 Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) 293 Row() { 294 Button('XS') 295 .onClick(() => { 296 this.sizeType = SizeType.XS 297 }).backgroundColor(0x317aff) 298 Button('SM') 299 .onClick(() => { 300 this.sizeType = SizeType.SM 301 }).backgroundColor(0x317aff) 302 Button('MD') 303 .onClick(() => { 304 this.sizeType = SizeType.MD 305 }).backgroundColor(0x317aff) 306 Button('LG') 307 .onClick(() => { 308 this.sizeType = SizeType.LG 309 }).backgroundColor(0x317aff) 310 } 311 }.width('100%').margin({ top: 5 }) 312 } 313} 314``` 315 316## TypeScript代码段 317 318代码段-TypeScript: 319 320**示例:** 321 322```TypeScript 323// js代码段: 324// xxx.ets 325@Entry 326@Component 327struct GridContainerExample { 328 @State sizeType: SizeType = SizeType.XS 329 330 build() { 331 Column({ space: 5 }) { 332 GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { 333 Row() { 334 Text('1') 335 .useSizeType({ 336 xs: { span: 6, offset: 0 }, 337 sm: { span: 2, offset: 0 }, 338 md: { span: 2, offset: 0 }, 339 lg: { span: 2, offset: 0 } 340 }) 341 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 342 Text('2') 343 .useSizeType({ 344 xs: { span: 2, offset: 6 }, 345 sm: { span: 6, offset: 2 }, 346 md: { span: 2, offset: 2 }, 347 lg: { span: 2, offset: 2 } 348 }) 349 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 350 Text('3') 351 .useSizeType({ 352 xs: { span: 2, offset: 8 }, 353 sm: { span: 2, offset: 8 }, 354 md: { span: 6, offset: 4 }, 355 lg: { span: 2, offset: 4 } 356 }) 357 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 358 Text('4') 359 .useSizeType({ 360 xs: { span: 2, offset: 10 }, 361 sm: { span: 2, offset: 10 }, 362 md: { span: 2, offset: 10 }, 363 lg: { span: 6, offset: 6 } 364 }) 365 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 366 } 367 }.width('90%') 368 369 Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) 370 Row() { 371 Button('XS') 372 .onClick(() => { 373 this.sizeType = SizeType.XS 374 }).backgroundColor(0x317aff) 375 Button('SM') 376 .onClick(() => { 377 this.sizeType = SizeType.SM 378 }).backgroundColor(0x317aff) 379 Button('MD') 380 .onClick(() => { 381 this.sizeType = SizeType.MD 382 }).backgroundColor(0x317aff) 383 Button('LG') 384 .onClick(() => { 385 this.sizeType = SizeType.LG 386 }).backgroundColor(0x317aff) 387 } 388 }.width('100%').margin({ top: 5 }) 389 } 390} 391``` 392 393## typescript代码段 394 395代码段-typescript: 396 397**示例:** 398 399```typescript 400// typescript代码段: 401// xxx.ets 402@Entry 403@Component 404struct GridContainerExample { 405 @State sizeType: SizeType = SizeType.XS 406 407 build() { 408 Column({ space: 5 }) { 409 GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { 410 Row() { 411 Text('1') 412 .useSizeType({ 413 xs: { span: 6, offset: 0 }, 414 sm: { span: 2, offset: 0 }, 415 md: { span: 2, offset: 0 }, 416 lg: { span: 2, offset: 0 } 417 }) 418 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 419 Text('2') 420 .useSizeType({ 421 xs: { span: 2, offset: 6 }, 422 sm: { span: 6, offset: 2 }, 423 md: { span: 2, offset: 2 }, 424 lg: { span: 2, offset: 2 } 425 }) 426 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 427 Text('3') 428 .useSizeType({ 429 xs: { span: 2, offset: 8 }, 430 sm: { span: 2, offset: 8 }, 431 md: { span: 6, offset: 4 }, 432 lg: { span: 2, offset: 4 } 433 }) 434 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 435 Text('4') 436 .useSizeType({ 437 xs: { span: 2, offset: 10 }, 438 sm: { span: 2, offset: 10 }, 439 md: { span: 2, offset: 10 }, 440 lg: { span: 6, offset: 6 } 441 }) 442 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 443 } 444 }.width('90%') 445 446 Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) 447 Row() { 448 Button('XS') 449 .onClick(() => { 450 this.sizeType = SizeType.XS 451 }).backgroundColor(0x317aff) 452 Button('SM') 453 .onClick(() => { 454 this.sizeType = SizeType.SM 455 }).backgroundColor(0x317aff) 456 Button('MD') 457 .onClick(() => { 458 this.sizeType = SizeType.MD 459 }).backgroundColor(0x317aff) 460 Button('LG') 461 .onClick(() => { 462 this.sizeType = SizeType.LG 463 }).backgroundColor(0x317aff) 464 } 465 }.width('100%').margin({ top: 5 }) 466 } 467} 468``` 469 470 471## 无标注代码段 472无标注代码段: 473 474**示例:** 475 476``` 477// 无标识代码段: 478// xxx.ets 479@Entry 480@Component 481struct GridContainerExample { 482 @State sizeType: SizeType = SizeType.XS 483 484 build() { 485 Column({ space: 5 }) { 486 GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { 487 Row() { 488 Text('1') 489 .useSizeType({ 490 xs: { span: 6, offset: 0 }, 491 sm: { span: 2, offset: 0 }, 492 md: { span: 2, offset: 0 }, 493 lg: { span: 2, offset: 0 } 494 }) 495 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 496 Text('2') 497 .useSizeType({ 498 xs: { span: 2, offset: 6 }, 499 sm: { span: 6, offset: 2 }, 500 md: { span: 2, offset: 2 }, 501 lg: { span: 2, offset: 2 } 502 }) 503 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 504 Text('3') 505 .useSizeType({ 506 xs: { span: 2, offset: 8 }, 507 sm: { span: 2, offset: 8 }, 508 md: { span: 6, offset: 4 }, 509 lg: { span: 2, offset: 4 } 510 }) 511 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 512 Text('4') 513 .useSizeType({ 514 xs: { span: 2, offset: 10 }, 515 sm: { span: 2, offset: 10 }, 516 md: { span: 2, offset: 10 }, 517 lg: { span: 6, offset: 6 } 518 }) 519 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 520 } 521 }.width('90%') 522 523 Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) 524 Row() { 525 Button('XS') 526 .onClick(() => { 527 this.sizeType = SizeType.XS 528 }).backgroundColor(0x317aff) 529 Button('SM') 530 .onClick(() => { 531 this.sizeType = SizeType.SM 532 }).backgroundColor(0x317aff) 533 Button('MD') 534 .onClick(() => { 535 this.sizeType = SizeType.MD 536 }).backgroundColor(0x317aff) 537 Button('LG') 538 .onClick(() => { 539 this.sizeType = SizeType.LG 540 }).backgroundColor(0x317aff) 541 } 542 }.width('100%').margin({ top: 5 }) 543 } 544} 545``` 546 547## 代码段标注 nocheck 548 549**示例:** 550 551<!--code_no_check--> 552```ts 553// 标注nocheck代码段: 554// xxx.ets 555@Entry 556@Component 557struct GridContainerExample { 558 @State sizeType: SizeType = SizeType.XS 559 560 build() { 561 Column({ space: 5 }) { 562 GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { 563 Row() { 564 Text('1') 565 .useSizeType({ 566 xs: { span: 6, offset: 0 }, 567 sm: { span: 2, offset: 0 }, 568 md: { span: 2, offset: 0 }, 569 lg: { span: 2, offset: 0 } 570 }) 571 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 572 Text('2') 573 .useSizeType({ 574 xs: { span: 2, offset: 6 }, 575 sm: { span: 6, offset: 2 }, 576 md: { span: 2, offset: 2 }, 577 lg: { span: 2, offset: 2 } 578 }) 579 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 580 Text('3') 581 .useSizeType({ 582 xs: { span: 2, offset: 8 }, 583 sm: { span: 2, offset: 8 }, 584 md: { span: 6, offset: 4 }, 585 lg: { span: 2, offset: 4 } 586 }) 587 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 588 Text('4') 589 .useSizeType({ 590 xs: { span: 2, offset: 10 }, 591 sm: { span: 2, offset: 10 }, 592 md: { span: 2, offset: 10 }, 593 lg: { span: 6, offset: 6 } 594 }) 595 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 596 } 597 }.width('90%') 598 599 Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) 600 Row() { 601 Button('XS') 602 .onClick(() => { 603 this.sizeType = SizeType.XS 604 }).backgroundColor(0x317aff) 605 Button('SM') 606 .onClick(() => { 607 this.sizeType = SizeType.SM 608 }).backgroundColor(0x317aff) 609 Button('MD') 610 .onClick(() => { 611 this.sizeType = SizeType.MD 612 }).backgroundColor(0x317aff) 613 Button('LG') 614 .onClick(() => { 615 this.sizeType = SizeType.LG 616 }).backgroundColor(0x317aff) 617 } 618 }.width('100%').margin({ top: 5 }) 619 } 620} 621``` 622 623## 废弃接口<sup>(deprecated)</sup> 624 625> **说明:** 626> 627> 从 API version 9开始支持,从API version 12开始废弃。 628 629**示例:** 630```js 631// 废弃接口代码段: 632// xxx.ets 633@Entry 634@Component 635struct GridContainerExample { 636 @State sizeType: SizeType = SizeType.XS 637 638 build() { 639 Column({ space: 5 }) { 640 GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) { 641 Row() { 642 Text('1') 643 .useSizeType({ 644 xs: { span: 6, offset: 0 }, 645 sm: { span: 2, offset: 0 }, 646 md: { span: 2, offset: 0 }, 647 lg: { span: 2, offset: 0 } 648 }) 649 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 650 Text('2') 651 .useSizeType({ 652 xs: { span: 2, offset: 6 }, 653 sm: { span: 6, offset: 2 }, 654 md: { span: 2, offset: 2 }, 655 lg: { span: 2, offset: 2 } 656 }) 657 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 658 Text('3') 659 .useSizeType({ 660 xs: { span: 2, offset: 8 }, 661 sm: { span: 2, offset: 8 }, 662 md: { span: 6, offset: 4 }, 663 lg: { span: 2, offset: 4 } 664 }) 665 .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center) 666 Text('4') 667 .useSizeType({ 668 xs: { span: 2, offset: 10 }, 669 sm: { span: 2, offset: 10 }, 670 md: { span: 2, offset: 10 }, 671 lg: { span: 6, offset: 6 } 672 }) 673 .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center) 674 } 675 }.width('90%') 676 677 Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC) 678 Row() { 679 Button('XS') 680 .onClick(() => { 681 this.sizeType = SizeType.XS 682 }).backgroundColor(0x317aff) 683 Button('SM') 684 .onClick(() => { 685 this.sizeType = SizeType.SM 686 }).backgroundColor(0x317aff) 687 Button('MD') 688 .onClick(() => { 689 this.sizeType = SizeType.MD 690 }).backgroundColor(0x317aff) 691 Button('LG') 692 .onClick(() => { 693 this.sizeType = SizeType.LG 694 }).backgroundColor(0x317aff) 695 } 696 }.width('100%').margin({ top: 5 }) 697 } 698} 699```