响应式布局_栅格_搜索栏

/**

* 网格布局*

*/

@Entry

@ComponentV2

struct BPPage01 {

  build() {

    Column() {

      GridRow({ columns: 12 }) {

        GridCol({ span: { sm: 12, md: 8, lg: 8 } }) {

          Text('首页').width('100%').height(40)

        }

        GridCol({ span: { sm: 12, md: 4, lg:4 } }) {

          Search({ placeholder: 'xxx' }).width('100%').height(40)

            .margin(0)

        }

}

      .height(40)

      .width('100%')

      .border({ width: 1, color: Color.Red })

    }

    .width('100%')

    .height('100%')

    .padding(20)

  }

}