今天學什麼？

今天閱讀「適用於 Android 開發人員的 Jetpack Compose」第一章「Compose 基礎知識」的「實際進行設計」的 1~7 小章

學習筆記

1. 當系統要求您實作設計時，最好先瞭解其結構。不要直接開始編寫程式碼，而是先分析設計本身。試著思考看看：如何將這個 UI 分成多個可重複使用的部分？
2. 跟 Xml 從 Layout 開始到 view 的設計不同，Compose 從最小元件 View 開始設計
3. TextField 是 Compose 的文字輸入框
   • 放圖片用leadingIcon
   • 放 Hint 用placeholder
4. Compose 指南的最佳做法，使用一個函式裝 UI 元件，函式傳入 modifier，這樣可以從外部傳入

   @Composable
   fun SearchBar(
      modifier: Modifier = Modifier
   ) {
      TextField(
          value = "",
          onValueChange = {},
          modifier = modifier
              .fillMaxWidth()
              .heightIn(min = 56.dp)
      )
   }
   

5. Image 是 Compose 的圖片顯示
   • 把圖片從長方型變成圓型
     1. 設定modifier的clip為CircleShape
     2. 設定contentScale為ContentScale.Crop
   • 設定contentScale不設定clip，那麼圖片會變成正方型
   • painter搭配painterResource(R.drawable.OOXX)可以放圖
   • contentScale可以剪裁樣式
6. 版面置中可以在Row或Column等設定horizontalAlignment為Alignment.CenterHorizontally
7. 如果要有圓角可以在Row或Column的上層增加一層Surface，裡面設定shape為MaterialTheme.shapes.medium

   Surface(
      shape = MaterialTheme.shapes.medium,
      modifier = modifier
   ) {
      Row {
          Image(
              painter = painterResource(R.drawable.fc2_nature_meditations),
              contentDescription = null
          )
          Text(text = stringResource(R.string.fc2_nature_meditations))
      }
   }