CFSDN nhấn mạnh vào giá trị tạo ra nguồn mở và chúng tôi cam kết xây dựng nền tảng chia sẻ tài nguyên để mọi nhân viên CNTT có thể tìm thấy thế giới tuyệt vời của bạn tại đây.

Bài viết trên blog CFSDN này thực hiện chức năng [Slot] trong ETS của ArkUI và được tác giả sưu tầm và biên soạn. Nếu bạn quan tâm đến bài viết này thì nhớ like nhé.

ETS đã được phát hành được một thời gian và nhiều bạn bè đã tạo ra nhiều trang đẹp thông qua ETS. Tuy nhiên, khi kiểm tra các thành phần và API của ETS, tôi thấy rằng phiên bản ETS hiện tại không có chức năng slot. Sau một thời gian tìm hiểu, cuối cùng chúng tôi đã tìm ra một phương pháp cong để triển khai chức năng khe cắm, cho phép tách rời các thành phần.

slot là gì

Bạn bè biết slot có thể bỏ qua.

Định nghĩa chính thức của vue là: Slot là một tập hợp các API phân phối nội dung. Khi thành phần này được hiển thị, nó sẽ được thay thế bằng "Hồ sơ của bạn". Khe có thể chứa bất kỳ mã mẫu nào.

Theo thuật ngữ thông thường, vị trí này giống như một trình giữ chỗ, phân phối nội dung bên ngoài thành phần tới thành phần đó thông qua API.

Các bước thực hiện

Xác định một lớp vị trí

Nó nhằm mục đích cung cấp một vị trí được đặt tên, do đó, một lớp vị trí được xác định cho việc ủy ​​quyền tiếp theo. Đây không phải là điểm quan trọng trong việc thực hiện và không cần phải xác định.

1. lớp Slot{
2. tên:chuỗi="mặc định"
3. Người xây dựng:bất kì
4.  
5. người xây dựng (tên:string,người xây dựng:bất kì){
6. cái này.tên=tên;
7. this.builder=người xây dựng
8. }
9. }

Tạo một thành phần CompA

Tạo một thành phần tùy chỉnh CompA và cung cấp khả năng xử lý cho hai vị trí được đặt tên, một vị trí mặc định và một vị trí2.

1. @Thành phần
2. cấu trúc CompA{
3. @State văn bản:chuỗi=""
4. @Dữ liệu trạng thái:string[]=[]
5. @State slot:Slot=new Slot(vô giá trị)
6. xây dựng(){
7. Cột(){
8. Cột(){
9. Chữ("Nội dung trong thành phần CompA")
10. .Màu chữ("#00F")
11. .fontSize(16)
12. .lề(10)
13. }
14. Cột(){
15. Hàng ngang(){
16. nếu(this.slot.tên=="mặc định"){
17. Đối với mỗi(["Đây là vị trí mặc định [mặc định]"],
18. this.slot.builder)
19. }
20. nếu(this.slot.tên=="khe cắm 2"){
21. Đối với mỗi(dữ liệu này,
22. this.slot.builder)
23. }
24. }
25. }
26. }
27. }
28. }

Các thành phần để xây dựng một trang

Xây dựng trang Chỉ mục, tạo hai Builders bolder1 và builder2 trong trang, đồng thời khởi tạo hai lớp Slot slot1 và slot2, đồng thời gán builder1 và builder2 cho slot1 và slot2 tương ứng.

Hiển thị một đoạn văn bản thông qua thành phần Văn bản trong builder1.

Hệ thống liên lạc nội bộ Builder2 xây dựng một mô hình phức tạp hơn một chút, thiết lập văn bản và mã QR.

1. @Lối vào
2. @Thành phần
3. cấu trúc Mục lục {
4. @Builder builder1(chuỗi:chuỗi){
5. Văn bản(chuỗi).Kích thước phông chữ(18).Màu phông chữ("#f00")
6. }
7.  
8. @Builder builder2(obj:bất kì){
9. Cột(){
10. Hàng ngang(){
11. Văn bản(obj.title).fontSize(16)
12. }
13. Hàng ngang(){
14. QRCode(obj.title).width(100).height(100)
15. }.lề(10)
16. }.lề(10)
17. }
18.  
19. slot1:Slot=mới Slot(this.builder1)
20. slot2:Slot=new Slot(this.builder2,"khe cắm 2")
21.  
22. xây dựng() {
23. Flex({ hướng: FlexDirection.Cột, căn chỉnh mục: ItemAlign.Center, căn chỉnh nội dung: FlexAlign.Center }) {
24. Cột(){
25. Máy tínhA(){
26. Chữ("Điều này sẽ không được hiển thị").fontSize(24)
27. }
28. CompA({khe:khe này.khe1})
29. CompA({slot:this.slot2,data:[{title:"Đây là khe thứ hai"},{tiêu đề:"http://www.baidu.com"}]})
30. }
31. }
32. .chiều rộng('100%')
33. .chiều cao('100%')
34. }
35. }

Hiệu ứng hiển thị:

Như bạn có thể thấy trong hình, vị trí thực của builder1 và builder2 nằm trong khe của CompA.

tập trung

Như đã đề cập ở trên, lớp Slot không cần phải tạo vì nguyên tắc triển khai là thông qua ForEach+Builder và Builder cũng có thể được liên kết với thành phần thông qua các hàm.

Hãy xem xét ForEach trong tài liệu chính thức:

Tất cả các mã đều mang tính chất tham khảo

1. @Lối vào
2. @Thành phần
3. cấu trúc Mục lục {
4. @Builder builder1(chuỗi:chuỗi){
5. Văn bản(chuỗi).Kích thước phông chữ(18).Màu phông chữ("#f00")
6. }
7. @Builder builder2(obj:bất kì){
8. Cột(){
9. Hàng ngang(){
10. Văn bản(obj.title).fontSize(16)
11. }
12. Hàng ngang(){
13. QRCode(obj.title).width(100).height(100)
14. }.lề(10)
15. }.lề(10)
16. }
17. slot1:Slot=mới Slot(this.builder1)
18. slot2:Slot=new Slot(this.builder2,"khe cắm 2")
19. xây dựng() {
20. Flex({ hướng: FlexDirection.Cột, căn chỉnh mục: ItemAlign.Center, căn chỉnh nội dung: FlexAlign.Center }) {
21. Cột(){
22. Máy tínhA(){
23. Chữ("Điều này sẽ không được hiển thị").fontSize(24)
24. }
25. CompA({khe:khe này.khe1})
26. CompA({slot:this.slot2,data:[{title:"Đây là khe thứ hai"},{tiêu đề:"http://www.baidu.com"}]})
27. }
28. }
29. .chiều rộng('100%')
30. .chiều cao('100%')
31. }
32. }
33.  
34. @Thành phần
35. cấu trúc CompA{
36. @State văn bản:chuỗi=""
37. @Dữ liệu trạng thái:string[]=[]
38. @State slot:Slot=new Slot(vô giá trị)
39. xây dựng(){
40. Cột(){
41. Cột(){
42. Chữ("Nội dung trong thành phần CompA")
43. .Màu chữ("#00F")
44. .fontSize(16)
45. .lề(10)
46. }
47. Cột(){
48. Hàng ngang(){
49. nếu(this.slot.tên=="mặc định"){
50. Đối với mỗi(["Đây là vị trí mặc định [mặc định]"],
51. this.slot.builder)
52. }
53. nếu(this.slot.tên=="khe cắm 2"){
54. Đối với mỗi(dữ liệu này,
55. this.slot.builder)
56. }
57. }
58. }
59. }
60. }
61. }
62. lớp Slot{
63. tên:chuỗi="mặc định"
64. Người xây dựng:bất kì
65. người xây dựng (người xây dựng:bất kì,tên?:sợi dây){
66. tên && (cái này.tên=tên);
67. this.builder=người xây dựng
68. }
69. }

Link gốc: https://harmonyos.51cto.com.

Cuối cùng, bài viết về cách triển khai chức năng [Slot] trong ETS của ArkUI kết thúc tại đây. Nếu bạn muốn biết thêm về cách triển khai chức năng [Slot] trong ETS của ArkUI, vui lòng tìm kiếm bài viết CFSDN. ủng hộ blog của tôi trong tương lai! .