「JetpackComposeSeriesLearning」-12修飾子-修飾子

修飾子

モディファイアモディファイアに精通している必要があります。このモディファイアは、前の列、行、ボックス、およびテキストで使用されます。これは、背景などのUI要素の作成に装飾と動作を追加するために使用される順序付けられた不変のモディファイア要素のセットです。 、パディング、クリックイベントなど、またはテキストに1行を設定したり、ボタンやその他の動作にさまざまなクリック状態を設定したりします。

モディファイアは非常に強力で、基本的に、スクロール、ドラッグ、ズームなど、考えられるあらゆる操作を実装できます。モディファイアには多くの機能があり、一般的に使用されるいくつかのモディファイア関数から始めます。

パディング

修飾子は、次のようなパディングであるパディングを変更できます。

Text("程序员", modifier = Modifier.padding(20.dp))
复制代码

パディングを追加するための修飾子が表示されます。パディングメソッドを呼び出して、対応するマージン値を渡すだけです。パディングのソースコードがどのように定義されているかを見てみましょう。

@Stable
fun Modifier.padding(
    start: Dp = 0.dp,
    top: Dp = 0.dp,
    end: Dp = 0.dp,
    bottom: Dp = 0.dp
)

@Stable
fun Modifier.padding(
    horizontal: Dp = 0.dp,
    vertical: Dp = 0.dp
)

@Stable
fun Modifier.padding(all: Dp)
复制代码

パディングの設定にはさまざまな方法があり、片側を別々に設定したり、水平方向と垂直方向に設定したり、すべてを均一に設定したりできることがわかります。上記のサンプルコードでは、デフォルトですべてのパディングが上、下、左、右になります。

コントロールのサイズを設定します

前のサンプルコードでサイズをどのように設定しましたか？Android Viewでは、幅と高さをxmlレイアウトに直接書き込むか、親レイアウトを調整または塗りつぶすことができます。

<TextView
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:gravity="center"
    android:text="Text1"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Text2"/>
<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="Text3"/>
复制代码

次に、作成では、親レイアウトの塗りつぶしなど、前の例でも役立ちます。

Text("程序员", modifier = Modifier.fillMaxSize())
复制代码

または、幅または高さを埋めることもできます。

Text("程序员", modifier = Modifier.fillMaxWidth()) // 充满宽
Text("程序员", modifier = Modifier.fillMaxHeight()) // 充满高
复制代码

何もしない場合は、AndroidViewのWrap_contentのようなデフォルトのアダプティブサイズになります。固定値のサイズを設定する場合は、次のように実行できます。

Text("程序员", modifier = Modifier.size(100.dp)) // 宽高都是100dp
Text("程序员", modifier = Modifier.size(width = 100.dp, height = 80.dp)) // 宽100dp 高80dp
复制代码

子レイアウトのサイズを親コントロールボックスと同じにしたいが、ボックスのサイズに影響を与えないようにする場合は、matchParentSize修飾子を使用できます。matchParentSizeは、Boxスコープでのみ使用できます。つまり、Boxコンポーザブルの直接の子にのみ適用されます。例を見てみましょう。内側のスペーサーは、親コントロールボックスから独自のサイズを取得します。次に、親コントロールボックスは、含まれているテキストから独自のサイズを取得します。

Box {
    Spacer(modifier = Modifier.matchParentSize().background(Color.Red))
    Text("程序员", fontSize = 30.sp)
}
复制代码

行と列の重み修飾子

Android Viewの線形レイアウトでもウェイトが使用されることがよくあります。作成では、次のようにウェイトを使用します。

Row(
    Modifier
        .fillMaxSize()
        .padding(10.dp)) {
    Box(modifier = Modifier.weight(2f).height(50.dp).background(Color.Blue))
    Box(modifier = Modifier.weight(1f).height(50.dp).background(Color.Red))
}
复制代码

可以看出，宽度蓝色：红色是2：1，正好是我们设置的对应weight的比例大小。

控件添加点击事件

Android中我们通过控件view.setOnClickListener来设置点击事件，Compose中Modifier可以设置点击事件：

Row(
    Modifier
        .fillMaxSize()
        .padding(10.dp)) {
    Box(modifier = Modifier.weight(2f).height(50.dp).background(Color.Blue))
    Box(modifier = Modifier.weight(1f).height(50.dp).background(Color.Red).clickable {
        Log.e("LM" , "点击了Box")
    })
}

// 点击红色Box后可以在控制台看到日志：
// 2022-04-04 15:08:52.793 19862-19862/com.carey.compose E/LM: 点击了Box
复制代码

控件添加圆角

Android View中实现圆角我们都是定义shape.xml，或者通过自定义控件通过canvas等去实现。但是在Compose中还是很容易的。用Modifier.shadow:

@Suppress("UnnecessaryComposedModifier")
@Stable
fun Modifier.shadow(
    elevation: Dp, // 阴影的高度
    shape: Shape = RectangleShape, // shape
    clip: Boolean = elevation > 0.dp // 是否裁剪其内容
) // 省略...
复制代码

我们看到它只有三个参数，第一个参数是设置阴影的高度，类型为Dp，直接设置即可；第二个参数是shape，想设置圆角的话，通过它即可实现；第三个参数是clip，是否裁剪其内容，默认根据阴影高度来判断，如：

Box(contentAlignment = Alignment.Center) {
        Image(painter = painterResource(id = R.drawable.small),
//            modifier = Modifier.size(150.dp).shadow(elevation = 10.dp, shape = MaterialTheme.shapes.medium),
            modifier = Modifier.size(150.dp).shadow(elevation = 10.dp, shape = RoundedCornerShape(18.dp)), // 指定圆角大小值
            contentDescription = ""
        )
    }
复制代码

如果不想要阴影，可以把elevation值设置成0，然后手动打开裁剪clip属性即可：

Box(contentAlignment = Alignment.Center) {
        Image(painter = painterResource(id = R.drawable.small),
//            modifier = Modifier.size(150.dp).shadow(elevation = 10.dp, shape = MaterialTheme.shapes.medium),
            modifier = Modifier.size(150.dp).shadow(elevation = 0.dp, shape = RoundedCornerShape(18.dp), clip = true),
            contentDescription = ""
        )
    }
复制代码

Modifier.shadow不只可以给Image设置圆角，其它可组合项也可以设置圆角。后期我们会介绍复杂的控件等。