2025年3月8日 星期六

Android app 程式設計-畫面底部 有三個按鈕 -2

  • 改成 Option 1 的 onClick 事件,使用 Intent 打開檔案選擇器。


package com.example.myapplication


import android.net.Uri

import android.os.Bundle

import android.widget.Toast

import androidx.activity.ComponentActivity

import androidx.activity.compose.setContent

import androidx.activity.result.contract.ActivityResultContracts

import androidx.compose.foundation.layout.*

import androidx.compose.material3.*

import androidx.compose.runtime.*

import androidx.compose.ui.Alignment

import androidx.compose.ui.Modifier

import androidx.compose.ui.platform.LocalContext

import androidx.compose.ui.tooling.preview.Preview

import androidx.compose.ui.unit.dp


// `MainActivity` 繼承 `ComponentActivity`,是應用的主要活動 (Activity)

class MainActivity : ComponentActivity() {

    // 註冊 ActivityResultLauncher 來接收檔案選擇結果

    private val filePickerLauncher = registerForActivityResult(ActivityResultContracts.GetContent()) { uri: Uri? ->

        uri?.let {

            // 處理選擇的檔案 URI

            Toast.makeText(this, "Selected file: $it", Toast.LENGTH_SHORT).show()

        }

    }


    override fun onCreate(savedInstanceState: Bundle?) { // `onCreate` 是 Activity 的進入點

        super.onCreate(savedInstanceState)

        setContent { // 使用 Jetpack Compose 來設定 UI

            MyApp(onOption1Click = { openFilePicker() }) // 傳入 onOption1Click 函數

        }

    }


    // 打開檔案選擇器

    private fun openFilePicker() {

        // 直接傳入 MIME 類型來啟動檔案選擇器

        filePickerLauncher.launch("*/*") // 允許選擇所有類型的檔案

    }

}


// `MyApp` 是 Compose 函式 (Composable),用來定義畫面內容

@Composable

fun MyApp(onOption1Click: () -> Unit) {

    val context = LocalContext.current // 取得當前的 Context (用來顯示 Toast)


    // `Box` 是一個容器,它會填滿整個畫面,並讓內容對齊底部

    Box(

        modifier = Modifier.fillMaxSize(), // `fillMaxSize()` 讓 Box 佔滿整個螢幕

        contentAlignment = Alignment.BottomCenter // 讓內容對齊到畫面底部

    ) {

        // `Row` 用來水平排列三個按鈕

        Row(

            modifier = Modifier

                .fillMaxWidth() // 讓 Row 佔滿整個寬度

                .padding(16.dp), // 設定四周的間距

            horizontalArrangement = Arrangement.SpaceEvenly // 讓按鈕均分寬度

        ) {

            // 第一個按鈕:Option 1

            Button(onClick = onOption1Click) { // 使用傳入的 onOption1Click 函數

                Text("Option 1") // 按鈕內的文字

            }


            // 第二個按鈕:Option 2

            Button(onClick = {

                Toast.makeText(context, "Option 2 Clicked!", Toast.LENGTH_SHORT).show()

            }) {

                Text("Option 2")

            }


            // 第三個按鈕:Option 3

            Button(onClick = {

                Toast.makeText(context, "Option 3 Clicked!", Toast.LENGTH_SHORT).show()

            }) {

                Text("Option 3")

            }

        }

    }

}


// `PreviewMyApp()` 用來預覽 `MyApp()` 的畫面 (在 Android Studio 預覽模式中可見)

@Preview(showBackground = true)

@Composable

fun PreviewMyApp() {

    MyApp(onOption1Click = {})

}