Open7
【メモ】JetpackComposeのTextFieldの余白などの対策【余計な奴ら】
peco環境
AndroidStudio Hedgehog
Kotlin 1.8.10
JetpackCompose 1.6.1
peco参考はここに
pecoTextFieldの内側にある余白を消したいとき
カスタムレイアウトとして自作のTextFieldを作成する必要がある。
雛形はデフォルトのTextFieldからちょろまかそう。
pecoTextFieldを構成しているBasicTextFieldのTextFieldDecorationBoxの引数にcontentPaddingが設定されていないのが原因。
設定されていない場合16.dpが渡される。
自身で設定できるようにするとこんな感じ。
@Composeable
fun HogeTextField(
// 中略
innerPadding: Dp = 0.dp
){
//中略
decorationBox = @Composable { innerTextField ->
TextFieldDefaults.TextFieldDecorationBox(
// 中略
contentPadding = TextFieldDefaults.textFieldWithLabelPadding(
start = innerPadding,
top = innerPadding,
end = innerPadding,
bottom = innerPadding
)
)
}
)
}
フォントサイズが小さく要素が少ない場合、BasicTextFieldのModifier.defaultMinSizeに引っかかることで、余白が産まれる場合もある。
// 色々省略
BasicTextField(
modifier = modifier
.defaultMinSize(
minWidth = TextFieldDefaults.MinWidth //280.dp,
minHeight = TextFieldDefaults.MinHeight //56.dp
)
)
おそらく0.dpに置き換えてしまっても特に問題ない？
peco背景色や下線を消したい
TextFieldにはModifier.background以外に、内部のBasicTextFieldの背景色がある。
これが地味にうっとおしい。
下線もたまに邪魔になる。
colors引数から色々と変えられる。
TextField(
// 略
colors = TextFieldDefaults.textFieldColors(
backgroundColor = Color.Transparent, // 背景色を透明にする
unfocusedIndicatorColor = Color.Transparent // 非選択時の下線を透明にする
)
)
TextFieldでは、内部のBasicTextFieldのmodifier.backgroundで背景の設定が、modifier.indicatopLineで下線の追加が、それぞれcolors引数の値で行われている。
例えば.indicatorLineを消した場合、下線は追加されなくなる。