[Compose Multiplatform] 在 Windows 上選擇檔案並顯示圖片 示範

在目前的 Compose Multiplatform 中似乎沒有官方的套件可以用來選擇檔案，只能使用上古時期的 java.awt.FileDialog ，這裡我們使用網友開發的 compose-multiplatform-file-picker 套件來選擇檔案

使用檔案選擇套件

在 build.gradle.kts 的 dependencies 加入套件依賴:

    
dependencies {
    implementation("com.darkrockstudios:mpfilepicker:2.1.0") // 檔案選擇器
}
    

最簡單選擇檔案

按下按鈕後開啟檔案選擇視窗，選擇完畢後關閉視窗並記錄檔案路徑

    
    var showFilePicker by remember { mutableStateOf(false) } // 顯示檔案選擇視窗
    var selectedFile: MPFile<Any>? by remember { mutableStateOf(null) } // 選定的檔案

    var fileType = listOf("jpg", "png", "jpeg", "gif", "bmp", "webp") // 限制可以選取的副檔名
    FilePicker(show = showFilePicker, fileExtensions = fileType) { file ->
        showFilePicker = false
        selectedFile = file
    }
    

要顯示也很簡單，比較難的部分是一開始不知道該怎麼依照路徑把檔案讀取，研究了一下最後包含完整程式碼的結果如下:

	
@Composable
fun ImagePicker() {

    var showFilePicker by remember { mutableStateOf(false) } // 顯示檔案選擇視窗
    var selectedFile: MPFile<Any>? by remember { mutableStateOf(null) } // 選定的檔案

    val fileType = listOf("jpg", "png", "jpeg", "gif", "bmp", "webp")// 限制可以選取的副檔名
    FilePicker(show = showFilePicker, fileExtensions = fileType) { file ->
        showFilePicker = false
        selectedFile = file
    }

    Button(
        modifier = Modifier.padding(10.dp, 0.dp, 0.dp, 0.dp),
        onClick = {
            showFilePicker = true
        }
    ) {
        Text("選擇圖片")
    }

    if (selectedFile != null) {
        val file: File = File(selectedFile?.path.toString())
        val imageBitmap: ImageBitmap = remember(file) { loadImageBitmap(file.inputStream()) }

        MaterialTheme {
            Column {
                Text("檔案路徑: ${selectedFile?.path}")
                Image(
                    painter = BitmapPainter(image = imageBitmap),
                    contentDescription = null
                )
            }
        }
    }
}
    

參考資料：
GitHub - Wavesonics/compose-multiplatform-file-picker
GitHub - JetBrains/compose-multiplatform - tutorials/Image_And_Icons_Manipulations/README.md
StackOverflow - How to load image in Kotlin Compose desktop?
GitHub issues - File chooser support #197