#Jetpack Compose 基本概念:

1. 可組合函式 Composable functions
2. 版面配置 Layouts
3. 質感設計 Material Design
4. 清單和動畫 Lists and animations

可組合函式 Composable functions

那什麼是可組合函式呢?
>可組合函式可讓您以程式輔助的方式定義應用程式 UI，只需說明 UI 的外觀並提供資料依附元件，而不必專注於 UI 的建構過程 (初始化元素、將元素附加至父項等)。

那就來先看一下 "Hello Android Kevin!" 如何產生的

• step1 在 MainActivity 的 onCreate 中 ，用一個 Composable function 取代 setContent 裡的內容

  原來是xml的

  setContentView(R.layout.activity_day3) 
  

  改Composable function

  import androidx.compose.runtime.Composable
  
  class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
                   //取代xml 
                   Greeting("Android Kevin")
  
           }
       }
   }
  

• step2 先在Composable function上加 @Composable ，再來定義 Composable function 內的參數，來設定元件(文字)

  //新增
  @Composable 
  //定義可組合函式 
  fun Greeting(name: String) {
      Text(text = "Hello $name!")
  }
  

• step3 讓Composable function在Android Studio中直接可以預覽， 加上@Preview 和 一個 Preview 函式

  import androidx.compose.ui.tooling.preview.Preview
  ...  
  
  //新增
  @Preview(showBackground = true)
  @Composable
  //定義預覽可組合函式 
  fun **DefaultPreview()** {
  
     Greeting("Android Kevin")
  
  }  
  

這樣就不用一直build ，可以直接改資料，就可以即時看到畫面，就不是說"這段有畫面哦"(用腦補)

即時預覽圖

模擬器

參考:

https://developer.android.com/jetpack/compose/tutorial