openharmonyコンテナコンポーネントグリッド

グリッド：「行」と「列」で区切られたセルで構成されるグリッドコンテナで、「項目」を配置するセルを指定することで様々なレイアウトが可能です。

Grid() プロパティ:

columnsTemplate : 現在のグリッドレイアウトの列数を設定するために使用されます。設定されていない場合、デフォルトは 1 列です。たとえば、「1fr 1fr 2fr」は 3 つの列に分割されます。親コンポーネントで許可される幅は 4 つに分割されます。最初の列は 1 部を占め、2 番目の列は 1 シェアを占め、3 番目の列は 2 シェアを占めます。
rowsTemplate : 現在のグリッドレイアウトの行数を設定するために使用されます。設定されていない場合、デフォルトは 1 行です。たとえば、「1fr 1fr 2fr」は 3 行に分割され、親コンポーネントで許可される高さは 4 行に分割されます。 4 等分します。最初の列が 1 部分を占め、2 番目の列が 1 個の部分を占め、3 番目の列が 2 個の部分を占めます。
columnsGap : 列間の間隔を設定するために使用されます。
rowsGap : 行間の間隔を設定するために使用されます。
SDK8 には次の属性があります:
editMode : 編集モードに入るかどうか編集モードに入るときに、Gird コンポーネント内に GridItem をドラッグアンドドロップできます。
layoutDirection : レイアウトの主軸の方向を設定します。現在サポートされている主軸のレイアウト方向は次のとおりです:
   LayoutDirection.Row: 水平方向にレイアウトします。つまり、最初に 1 つの列を埋めてから、次の列を埋めます。
   LayoutDirection.Column: 垂直方向にレイアウトします。つまり、最初に 1 行を埋めてから、次の行を埋めます。
maxCount :layoutDirectionがRowの場合は表示可能な最大行数を示し、layoutDirectionがColumnの場合は表示可能な最大列数を示します。
minCount :layoutDirectionがRowの場合は表示可能な最小行数を示し、layoutDirectionがColumnの場合は表示可能な最小列数を示します。
セルの長さ:layoutDirection が Row の場合は行の高さを表し、layoutDirection が Column の場合は列の幅を表します。
multiSelectable : マウスフレーム選択を有効にするかどうか、false: フレーム選択をオフにする、true: フレーム選択を有効にする。
ragAnimation : GridItem アニメーションのドラッグを有効にするかどうか。
edgeEffection : エッジのスライドエフェクトを設定します。現在サポートされているスライドエフェクトは、EdgeEffect
   Spring: 弾性のある物理アニメーションです。エッジまでスライドした後、初速度またはタッチイベントに基づいて一定の距離をスライドし続け、放した後にリバウンドすることができます。。
   なし: 端までスライドしても効果はありません。

効果は次の図に示すとおりです。

コード：

@Entry
@Component
struct GridTest {
  @State Number: String[] = ['0', '1', '2', '3', '4']

  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.Number, (day: string) => {
          ForEach(this.Number, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height('100%')
                .textAlign(TextAlign.Center)
            }
          }, day => day)
        }, day => day)

      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .editMode(true)
      .backgroundColor(0xFAEEE0)
      .height(300)

      Text('C_scroll').fontColor(0x000000).fontSize(9).width('90%')
      Grid() {
        ForEach(this.Number, (day) => {
          ForEach(this.Number, (day) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height(80)
                .textAlign(TextAlign.Center)
            }
          }, day => day)
        }, day => day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .onScrollIndex((first: number) => {
        console.info(first.toString())
      })
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)


    }
    .width('100%')
    .height('100%')
  }
}

openharmonyコンテナコンポーネントグリッド

おすすめ