Understanding Text Field in Compose

Transcript

1. Understanding Text Field in Compose Albert Chang
2. Parameters of BasicTextField • String vs. TextFieldValue • Caveats of onValueChange • Do not change the input value whenever possible • Do not assume that characters arrive one by one • VisualTransformation • decorationBox
3. How to create a text fi eld with custom design • Need to unify the line height of Latin characters and Japanese characters • Setting line height to 1.5 times of font size should be good enough
4. LineHeightStyle.Trim
5. Default text style values includeFontP adding alignment trim Before Compose 1.6 true Proportional Both Compose 1.6+ false Center (Material 2/3 only) None (Material 2/3 only)
6. LineHeightStyle.Alignment
7. How to create a special text fi eld such as an auth code input box
8. Text fi eld state management • Update the state synchronously • MutableState is recommended • MutableStateFlow is also okay • Use Dispatcher.Main.immediate (default) • Make sure all transformations are synchronous
9. New text fi eld API • BasicTextField2 (name is temporary) • Will replace current API • Current API has some fundamental design problems and tech debt to be addressed
10. Design problems of TextFieldValue • Composition can be changed by API user • One-frame delay before state change is seen • Complex and error-prone internal state management
11. BasicTextField2 • Simpler and robuster internal implementation • More intuitive API • Easier-to-implement visual transformation • More features • Better performance
12. Feedback on the new API is welcome! Google Issue Tracker / Compose Slack channel
13. Source of Demos Slides