android - Android Jetpack Compose Grid の外観

Question

現在、私の画面は3つの主要部分に分かれています（おそらくもっと良いアプローチがあると思います）：

1. 最初の部分はデータを表示しています。ほぼ同じ9項目に分かれており、異なるライブ（定期的に変化するデータ）を表示しています。それらは現在3行3列になっています（おそらくもっと良いアプローチがあると思います）。

2. それらの下には、画面の最後の部分にどのフラグメントを表示するかを制御する、画面タブ ナビゲーションの内部があります。

3. 画面の下部には、より頻繁に変更されるデータ (グラフ、マップなどに表示されるデータ) を含む fragmentFrame (Jetpack Compose で同等のものを調査します) が必要だと思います。画面の 2) で特定のタブを選択すると、各 Fragment が表示されます。

画面を作成するための私のコードは次のとおりです。

@ExperimentalFoundationApi
@Composable
fun ActivityCustomGridScreen() {
  Column(
      modifier = Modifier
        .fillMaxSize()
        .background(Color.Gray)
        .fillMaxHeight(/*4f*/)
        .fillMaxWidth(/*4f*/)
  ) {
    CustomItem(1f, MaterialTheme.colors.secondaryVariant)
    CustomItem(1f, MaterialTheme.colors.secondary)
    CustomItem(1f, MaterialTheme.colors.onSurface)
    CustomItem(0.7f, MaterialTheme.colors.onError, false)
    CustomItem(2.5f, areItemsShown = false)
  }
}


@Composable
fun ColumnScope.CustomItem(
    weight: Float,
    color: Color = MaterialTheme.colors.primary,
    areItemsShown: Boolean = true
) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
//            .width(200.dp)
            .weight(weight)
            .padding(3.dp),
        color = color
    ) {
        Row(
            Modifier
                .weight(3f)
        ) {
            if (areItemsShown) {
                ActivityCardComponent(
                    ParameterItemState(), modifier = Modifier
                        .padding(5.dp)
                        .weight(1f)
                )
                ActivityCardComponent(
                    ParameterItemState(), modifier = Modifier
                        .padding(5.dp)
                        .weight(1f),
                    Alignment.CenterHorizontally
                )
                ActivityCardComponent(
                    ParameterItemState(), modifier = Modifier
                        .padding(5.dp)
                        .weight(1f),
                    Alignment.End
                )
            }
        }

    }
}

• また、画面の最初の部分から単一のアイテムを作成して望ましいサイズにするのに問題があります(この比率1:2:1で列ごとに3つのアイテムが必要です)

@Composable
fun ActivityCardComponent(
    itemData: ParameterItemState, modifier: Modifier,
    alignment: Alignment.Horizontal =  Start
) {
    Card(
        modifier = modifier
            .wrapContentWidth(alignment)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.background(Color.Red)
        ) {
            Image(
                painter = painterResource(id = itemData.getIndicatorIcon()),
                contentDescription = "Sport Parameter Icon"
            )
            Column(Modifier.padding(4.dp)) {
                Text(
                    stringResource(itemData.getIndicatorTittle()),
                    modifier = Modifier
                        .align(Alignment.CenterHorizontally),
                    style = MaterialTheme.typography.overline,
                )
                Spacer(modifier = Modifier.defaultMinSize())
                Text(
                    text = itemData.parameterValue,
                    modifier = Modifier,
                    style = MaterialTheme.typography.subtitle1
                )
                Text(
                    stringResource(itemData.getIndicatorDimensionName()),
                    modifier = Modifier.align(Alignment.End),
                    style = MaterialTheme.typography.overline
                )
            }
        }
    }
}

そして私のアイテム状態クラス：

data class ParameterItemState(
    val parameterValue: String = "12 345",
    val parameterDimension: IndicatorsEnum = IndicatorsEnum.DISTANCE_IN_METERS,
    val itemVisibility: Int = View.VISIBLE,
    val itemPosition: Int = 0,

    ) {
    fun getIndicatorTittle() = parameterDimension.getIndicatorTittle() // Speed (Time per 500m) id
    fun getIndicatorDimensionName() = parameterDimension.getIndicatorDimensionName() // ave per 500 m id
    fun getIndicatorIcon() = parameterDimension.getIndicatorIcon() // icon id
}

私はまだビューモデルのものを作成していません。それも含めて回答を受け入れます。