Jetpack ComposeのModifierとは②？

Overview

https://developer.android.com/jetpack/compose/modifiers?hl=ja
公式より引用

修飾子を使用すると、コンポーザブルを装飾または拡張できます。修飾子では、次のようなことができます。

コンポーザブルのサイズ、レイアウト、動作、外観を変更する
ユーザー補助ラベルなどの情報を追加する
ユーザー入力を処理する
要素をクリック可能、スクロール可能、ドラッグ可能、ズーム可能にするなど、高レベルの操作を追加する
修飾子は標準の Kotlin オブジェクトです。Modifier クラス関数のいずれかを呼び出して修飾子を作成します。

今回は、Textに幅と高さの設定をしていこうと思います。

summary

今回は、Modifierを使用して幅と高さの設定をやってみようと思います。
幅を設定する
幅を指定するには、Modifier.width(100.dp))を使います。

Row {
        Text(text = "幅を", modifier = Modifier.width(100.dp))
        Text(text = "指定します", modifier = Modifier.background(
            Color(0xFF00FF00)
        ))
    }

高さを設定する
高さを指定するには、modifier = Modifier.height(40.dp))を使います。

Column {
        Text(text = "高さを", modifier = Modifier.height(40.dp))
        Text(text = "指定します", modifier = Modifier.background(
            Color(0xFF00FF00)
        ))
    }

幅と高さを設定する
幅と高さを指定するには、Modifier.height(40.dp).width(100.dp))を使います。

Column {
        Text(text = "高さを", modifier = Modifier.height(40.dp).width(100.dp))
        Text(text = "指定します", modifier = Modifier.background(
            Color(0xFF00FF00)
        ))
    }

全体のコード
幅と高さを指定した全体のコードです。

package com.example.basiccodelab

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.example.basiccodelab.ui.theme.BasicCodelabTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BasicCodelabTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting(name = "Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Column {
        Text(text = "高さを", modifier = Modifier.height(40.dp).width(100.dp))
        Text(text = "指定します", modifier = Modifier.background(
            Color(0xFF00FF00)
        ))
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    BasicCodelabTheme {
        Greeting(name = "Android")
    }
}

ビルドすると、このようなUIになります

thoughts

今回学習の参考になった動画
モケラボさんの動画は、解説が短く機能ごとに紹介されているので見ていても疲れないし、理解しやすいのでおすすめです。

https://www.youtube.com/watch?v=bTPmY48S7nE