Lời mở đầu

Đột phát kỳ tưởng, viết một cái quát một quát ứng dụng, có thể hay không có thể ở tụ hội trường hợp cho chúng ta sinh hoạt tăng thêm một ít lạc thú đâu

Nói làm liền làm

Khai phá

Mới bắt đầu trang

Quát Quát Nhạc, chúng ta khẳng định muốn viết một cái khởi động lại giao diện, chúng ta có thể ở chỗ này thiết trí chúng ta tưởng thiết trí nội dung, cùng với trường cùng khoan quy cách

import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
// chiều dài nhiều ít cách
@State long: number = 0;
// chiều rộng nhiều ít cách
@State wide: number = 0;
@State Input: string = ""
// giải thưởng số tổ
@State prize: string[] = []

build() {
Column() {
// lựa chọn quy cách
Row() {
Text( "Sinh thành Quát Quát Nhạc lớn nhỏ:" )
TextInput()
.width( "50vp" )
.height( "40vp" )
.textAlign(TextAlign.Center)
.maxLength(2)
.onChange((val) => {
this.long = parseInt(val);
})
Text( "X" )
TextInput()
.width( "50vp" )
.height( "40vp" )
.textAlign(TextAlign.Center)
.maxLength(2)
.onChange((val) => {
this.wide = parseInt(val);
})
}

Text(` trước mặt kích cỡ cùng sở hữu ${this.long * this.wide} cái không cách `)
.height( "40vp" )
// đưa vào giải thưởng
Row() {
Text( "Thỉnh đưa vào giải thưởng:" )
TextInput({ text: this.Input })
.width( "200vp" )
.height( "40vp" )
.textAlign(TextAlign.Center)
.onChange((val) => {
this.Input = val;
})
Button( "Tăng thêm" )
.onClick(() => {
this.prize.push(this.Input)
this.Input = ""
})
}

Text(` trước mặt đã tăng thêm ${this.prize.length} cái giải thưởng `)
// giải thưởng
List() {
ForEach(this.prize, (item: string, index: number) => {
ListItem() {
Column() {
prize_item({
prize: item,
// xóa bỏ khen thưởng hàm số
delete: () => {
this.prize.splice(index, 1)
}
})
}
.size({ width: "100%", height: "100vp" })
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)

}
})
}
.width('100%')
.height( "1700px" )

Button( "Sinh thành" )
.margin( "20px" )
.onClick(()=>{
router.pushUrl({
url: "pages/scrape",
params:{
long:this.long,
wide:this.wide,
prize:this.prize
}
})
})

}
.size({ height: "100%", width: "100%" })
}
}
// giải thưởng lắp ráp
@Component
struct prize_item {
@Prop prize: string
delete = () => {
}

build() {
Row() {
Text(this.prize)
.fontSize( "100px" )
Text( "x" )
.fontSize( "100px" )
.fontColor( "#ff0000" )
.onClick(() => {
this.delete()
})
}
.margin( "10px" )
.borderRadius( "20px" )
.backgroundColor( "#F0FFF0" )
.justifyContent(FlexAlign.SpaceAround)
.size({ width: "70%", height: "70%" })

}
}

( ps: Trần Tang chủ trang:https://ost.51cto /user/posts/16146021)
Tuy rằng số hiệu có điểm trường như vậy chúng ta là có thể được đến một cái tương đối thích hợp giao diện, tựa như cái dạng này

Chúng ta điểm đánh giải thưởng bên phải xoa hào liền có thể đem cái này giải thưởng từ danh sách trung xóa bỏ

Thiết trí bối cảnh

Thiết trí xong cơ bản nhất khởi động lại thiết trí lúc sau, chúng ta liền phải bắt đầu xuống tay quát một quát nội dung sinh thành
Ý nghĩ: Sinh thành chúng ta quy định quy cách nhị vị số tổ, lại đem chúng ta yêu cầu tăng thêm giải thưởng tùy cơ chôn ở chúng ta ô vuông trung, như vậy liền có thể giải quyết thưởng bị nhét vào nào vấn đề này.

function Generate_body(long: number, wide: number, prize: Array<string>, fail: string): Array<Array<string>> {
// khởi động lại một cái 2D số tổ, sở hữu nguyên tố đều là 0
let array: Array<Array<string>> = Generate_arrays(long, wide, fail)
let len = prize.length
// ở nhị vị số tổ trung chôn lôi
for (let i = 0; i < len; ) {
// sinh thành tùy cơ hành cùng liệt hướng dẫn tra cứu
let row = Math.floor(Math.random() * wide);
let col = Math.floor(Math.random() * long);
if (array[row][col] == fail) {
array[row][col] = prize[i];
i++;
}
}
return array;
}

function Generate_arrays(long: number, wide: number, value: string) {
// khởi động lại một cái 2D số tổ, sở hữu nguyên tố đều là value
const array: Array<Array<string>> = [];
for (let index = 0; index < wide; index++) {
let result: Array<string> = [];
for (let i = 0; i < long; i++) {
result.push(value);
}
array.push(result)
}
return array;
}

Chúng ta trải qua hai tầng ForEach đem nội dung nhuộm đẫm đến chúng ta trên màn hình

// dựng phóng hướng
Flex({ wrap: FlexWrap.NoWrap, direction: FlexDirection.Row }) {
ForEach(this.List, (item_y: Array<string>, index_y: number) => {
// hoành phóng hướng
Flex({ wrap: FlexWrap.NoWrap, direction: FlexDirection.Column }) {
ForEach(item_y, (item_x: string, index_x: number) => {
scrape_item({
prize: item_x,
h:this.long,
w:this.wide
})
})
}
})

}
.size({ width: 350, height: 350 })

Biểu hiện hiệu quả như sau sở kỳ

Hoàn mỹ
Phía dưới cũng chính là chúng ta cuối cùng một cái bước đi

Tăng thêm mông bản

Khi chúng ta chuẩn bị hảo nội dung sau, cũng chỉ dư lại cuối cùng một việc, đó chính là tăng thêm mông bản, làm chúng ta có thể thể nghiệm thuần thiên nhiên Quát Quát Nhạc lạc thú
Đương nhiên, đầu tiên vẫn là yêu cầu viết một cái giải thưởng lắp ráp, đương nhiên đối với màn hình trước các vị đại lão tới nói không hề khó khăn

@Component
struct scrape_item {
@Prop prize: string
@Prop h: number
@Prop w: number
@State is_show: boolean = false

build() {
Column() {
Column() {
if (this.is_show) {
Text(this.prize)
}

}
.size({ width: "100%", height: "100%" })
.backgroundColor(this.is_show? "#F5F5F5": "#DCDCDC" )
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.is_show = true
})
}
.padding( "20px" )
.size({ width: 350 / this.w, height: 350 / this.h })
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)

}
}

Cuối cùng lại đem số hiệu toàn bộ ghép nối lên, liền có thể vui sướng Quát Quát Nhạc, hiệu quả như sau phương biểu hiện

Quát một quát trang hoàn chỉnh số hiệu

import { router } from '@kit.ArkUI';

@Entry
@Component
struct scrap {
// tiếp thu đến số liệu
@State long: number = (router.getParams() as object)?.[ "long" ];
@State wide: number = (router.getParams() as object)?.[ "wide" ];
@State prize: string[] = (router.getParams() as object)?.[ "prize" ];
@State fail: string = "Không"
// chủ thể số tổ danh sách
@State List: Array<Array<string>> = Generate_body(this.long, this.wide, this.prize, this.fail)

build() {
Column() {

// dựng phóng hướng
Flex({ wrap: FlexWrap.NoWrap, direction: FlexDirection.Row }) {
ForEach(this.List, (item_y: Array<string>, index_y: number) => {
// hoành phóng hướng
Flex({ wrap: FlexWrap.NoWrap, direction: FlexDirection.Column }) {
ForEach(item_y, (item_x: string, index_x: number) => {
scrape_item({
prize: item_x,
h: this.long,
w: this.wide,
})
})
}
})

}
.size({ width: 350, height: 350 })

Button( "Trọng khai" )
.margin( "10px" )
.onClick(() => {
this.List = Generate_body(this.long, this.wide, this.prize, this.fail)
})

}
.justifyContent(FlexAlign.SpaceEvenly)
.alignItems(HorizontalAlign.Center)
.size({ width: "100%", height: "100%" })
}
}

function Generate_body(long: number, wide: number, prize: Array<string>, fail: string): Array<Array<string>> {
// khởi động lại một cái 2D số tổ, sở hữu nguyên tố đều là 0
let array: Array<Array<string>> = Generate_arrays(long, wide, fail)
let len = prize.length
// ở nhị vị số tổ trung chôn lôi
for (let i = 0; i < len; ) {
// sinh thành tùy cơ hành cùng liệt hướng dẫn tra cứu
let row = Math.floor(Math.random() * wide);
let col = Math.floor(Math.random() * long);
if (array[row][col] == fail) {
array[row][col] = prize[i];
i++;
}
}
return array;
}

function Generate_arrays(long: number, wide: number, value: string) {
// khởi động lại một cái 2D số tổ, sở hữu nguyên tố đều là value
const array: Array<Array<string>> = [];
for (let index = 0; index < wide; index++) {
let result: Array<string> = [];
for (let i = 0; i < long; i++) {
result.push(value);
}
array.push(result)
}
return array;
}


@Component
struct scrape_item {
@Prop prize: string
@Prop h: number
@Prop w: number
@State is_show: boolean = false

build() {
Column() {
Column() {
if (this.is_show) {
Text(this.prize)
}

}
.size({ width: "100%", height: "100%" })
.backgroundColor(this.is_show? "#F5F5F5": "#DCDCDC" )
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
.onClick(() => {
this.is_show = true
})
}
.padding( "20px" )
.size({ width: 350 / this.w, height: 350 / this.h })
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)

}
}