Jetpack Compose 中 Flutter 的擴展小部件等效於什么？

Question

我對Jetpack Compose非常陌生，我想創建一個簡單的名片應用程序，如下所示：

我想要實現這種布局的方式是創建兩個主要的Columns ，一個用於上部（帶有名稱和標題的徽標），一個用於屏幕下部（聯系方式）。 我希望第一Column占據屏幕的所有剩余空間，因此較低的Column轉到頁面的末尾。 在Flutter ，我將兩Columns都放在父Column中，並用Expanded包裹第一Column ，它就可以完成這項工作。 那么如何在Jetpack Compose中實現相同的行為呢？ 代碼如下：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BusinessCardTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    BusinessCard()
                }
            }
        }
    }
}

@Composable
fun LogoNameTitle() {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Image(
            painter = painterResource(id = R.drawable.android_logo),
            contentDescription = "",
        )
        Text("Jennifer Doe", color = Color.White)
        Text("Android Developer Extraordinaire", color = Color.Green)
    }
}

@Composable
fun ContactInformation() {
    Column() {
        Row() {
            Icon(imageVector = Icons.Rounded.Phone, contentDescription = "", tint = Color.Green)
            Text("+11 (123) 444 555 666", color = Color.White)
        }
        Row() {
            Icon(imageVector = Icons.Rounded.Share, contentDescription = "", tint = Color.Green)
            Text("@AndroidDev", color = Color.White)
        }
        Row() {
            Icon(imageVector = Icons.Rounded.Email, contentDescription = "", tint = Color.Green)
            Text("jen.doe@android.com", color = Color.White)
        }
    }
}

@Composable
fun BusinessCard() {
    Surface(color = Color.DarkGray) {
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            LogoNameTitle()
            ContactInformation()
        }
    }
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun BusinessCardPreview() {
    BusinessCardTheme {
        BusinessCard()
    }
}

而當前的output為：

Answer 1

使用Column作為父容器，只需將weight(1f)修飾符應用於第一個嵌套Column （名稱和標題）。

就像是：

Column(modifier = Modifier.fillMaxSize()){
   
   Column(Modifier.fillMaxWidth().weight(1f)){
        //Logo and title    
   }
   Column(){
       //Contact info
        Text("First Name")
        Text("Surname")
        Text("Other info")
   }
}

請注意， weight修飾符需要ColumnScope 。 在您的情況下，使用修飾符作為參數：

@Composable
fun LogoNameTitle(modifier: Modifier = Modifier) {
    Column(
        modifier = modifier,
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        //...
    }
}

@Composable
fun BusinessCard() {
    Surface(color = Color.DarkGray,modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier.fillMaxSize().padding(16.dp)
        ) {
            LogoNameTitle(modifier=Modifier.weight(1f))
            ContactInformation()
        }
    }
}