[Daily HarmonyOS Next] Bottom Placement, Adding Search Component to Custom Dialog, Modifying APP Name and Icon, Page Navigation

@Entry
@Component
struct Index {
  @State message: string = 'Click to Show Dialog';
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5];
  controllera: TextInputController = new TextInputController();
  @State flag: boolean = false;
  @State TextTest: string = '';
  @State TextTest1: string = '';
  @State screenHeight: number = 0;
  // Control the display/hide of the semi-modal transition
  @State isShowSheet: boolean = false;

  // Build the semi-modal display interface using @Builder
  @Builder
  mySheet() {
    // Use a Stack container to fix the Navigation bar
    Stack({ alignContent: Alignment.TopStart }) {
      Scroll(this.scroller) {
        Column() {
          TextInput({ placeholder: 'search...', controller: this.controllera })
            // Disable focus by default
            .focusable(this.flag)
            .width('90%')
            .height(40)
            .backgroundColor('#FFFFFF')
            .margin({ top: 8, bottom: 20 })
            // Re-acquire focus on click
            .onClick(() => {
              this.flag = true;
              this.TextTest1 = '1';
            });

          ForEach(this.arr, (item: number) => {
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ top: 10 });
          }, (item: number) => item.toString());

          // Space for the keyboard; pushes up content when not empty
          Text(this.TextTest)
            .lineHeight(300)
            .fontColor('#DCDCDC');
          Text(this.TextTest1)
            .lineHeight(300)
            .fontColor('#DCDCDC');
        }.width('100%');
      }
      // Top margin based on the Navigation bar height
      .margin({ top: 110 })
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.On)
      .scrollBarColor(Color.Gray)
      .scrollBarWidth(0)
      .onScroll((xOffset: number, yOffset: number) => {
        console.info(xOffset + ' ' + yOffset);
      });

      // Second child component in the Stack; Navigation overlays the Scroll container
      Navigation() {
      }
      .title('Navigation Title')
      .backgroundColor(Color.Yellow)
      .height(110)
      .titleMode(NavigationTitleMode.Full)
      .hideTitleBar(false)
      .hideToolBar(false);

      // A button concept to handle keyboard dismissal (not implemented due to lack of keyboard event)
      Button('Dismiss Keyboard')
        .onClick(() => {
          this.TextTest1 = '';
          this.flag = false;
        })
        .margin({ top: 10, left: 20 });
    }.width('100%').height('100%').backgroundColor(0xDCDCDC);
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .bindSheet(this.isShowSheet, this.mySheet(), {
            showClose: false,
            height: 700,
            dragBar: false,
            onDisappear: () => {
              this.isShowSheet = !this.isShowSheet;
            }
          })
          .onClick(() => {
            this.isShowSheet = !this.isShowSheet;
          });
      }
      .width('100%');
    }
    .height('100%');
  }
}

router.pushNamedRoute({
  name: 'targetRouteName', // Name of the target route
  parameters: {
    // Parameters to pass
  }
});