Android Compose Modifier 的 size 和 padding 方法的坑

size用于设置尺寸，padding用于设置周边间距，看起来很简单，其实也暗藏玄机，比如我想实现图1的效果：

图1

但是实际效果却是图2这样的：

图2

"按住对话“按钮明显尺寸不对。代码如下：

            // "按住对话"按钮
            TextButton(
                onClick = {},
                modifier = Modifier
                    .size(60.dp)
                    .padding(
                        end = 15.dp,
                        bottom = 15.dp)
                    .constrainAs(buttonSpeak) {
                        end.linkTo(parent.end)
                        bottom.linkTo(parent.bottom)
                    },
                colors = ButtonDefaults.buttonColors(
                    Color(255, 255, 255, 100),
                    Color.Black
                ),
                shape = RoundedCornerShape(10.dp)
            ) {
                Text(
                    text = "按住\n对话",
                    fontSize = 17.sp
                )
            }

            // "复制答案"按钮
            TextButton(
                onClick = onButtonCopyAnswerClicked,
                modifier = Modifier
                    .padding(
                        end = 12.dp,
                        bottom = 15.dp)
                    .size(60.dp)
                    .constrainAs(buttonCopyAnswer) {
                        end.linkTo(buttonSpeak.start)
                        bottom.linkTo(parent.bottom)
                    },
                colors = ButtonDefaults.buttonColors(
                    Color(255, 255, 255, 100),
                    Color.Black
                ),
                shape = RoundedCornerShape(10.dp)
            ) {
                Text(
                    text = "复制\n答案",
                    fontSize = 17.sp
                )
            }

找了半天，才发现问题出在"按住对话"按钮是先调用了 padding 后调用了 size，而"复制答案"按钮则相反。区别就在于，先调用 padding，这时尺寸还不确定，再调用size，尺寸确定了，也就是占用的空间确定了，就会在占用的空间周围设置 padding；如果反过来先调用 size，尺寸就定好了，再调用 padding，就会在 size 所占用的空间”削掉“一块空间作为 padding，如图3所示。

图3
全文完。