web-dev-qa-db-ja.com

ジェットパックでマージンを追加するにはどうすればいいですか?

_Jetpack Compose_で余白を正確に追加できますか?

Modifier.padding(...)のパディングのためのModifierがあることがわかりますが、私はマージンのために1つを見つけることができないか、私は盲目ですか?

誰かが私を導いてください。

どうもありがとうございます。

11

パディングマージンの面で考える( - === - )あなたはいわゆる ボックスモデル 私たちが慣れています。 Composeにはボックスモデルはありませんが、特定の合成可能に適用される一連の修飾子です。トリックは, Padding または 境界線 複数回、そして これらの問題の順序 (次の事項の順序)==(順序)を適用できるということです。

@Preview
@Composable
fun PaddingExample() {
    Text(
        text = "Hello World!",
        color = Color.White,
        modifier = Modifier
            .padding(8.dp) // margin
            .border(2.dp, Color.White) // outer border
            .padding(8.dp) // space between the borders
            .border(2.dp, Color.Green) // inner border
            .padding(8.dp) // padding
    )
}
 _

結果として、あなたはこの合成可能になるでしょう:

enter image description here

このデザインは 修飾子​​のドキュメント でよく説明されています。

注:明示的な順序は、異なる修飾子がどのように対話するかについての理由を支援します。これをボックスモデルを学び、その余白が要素を「外」に適用したが「内側」と埋め込まれたボックスモデルを学ぶことができ、それに応じて背景要素が大きくなることを比較してください。修飾装置の設計はこの種の行動を明示的かつ予測可能にし、あなたが望む正確な行動を達成するためのより多くのコントロールを与えます。

0
Valeriy Katkov

あなたはあなたのコンテンツを置くことと同じ効果を達成することができます、それはBoxのように異なる合成可能な内側に、外部合成clickableを作ることができます。このアプローチでは、内側のパッド入り領域がクリック可能なコンテンツに含まれます。

0
Sinan Kozak