Flutter 如何调整 BottomSheet 的高度和边界半径？

在Flutter中调整BottomSheet的高度和边界半径通常涉及到几个关键点，包括使用布局约束以及添加装饰属性。以下是具体的实现方法：

1. 调整高度

BottomSheet的高度默认是由其内部内容的高度决定的。如果要设置特定的高度，可以通过包裹一个具有特定高度的容器（例如Container）来实现。例如：

dart
void _showBottomSheet(BuildContext context) {
  showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200, // 设置BottomSheet的高度
        color: Colors.white,
        child: Center(
          child: Text('这是一个自定义高度的BottomSheet'),
        ),
      );
    },
  );
}

2. 调整边界半径

要为BottomSheet添加边界半径，可以使用Container的decoration属性，并在其中使用BoxDecoration来设置borderRadius。例如：

dart
void _showBottomSheet(BuildContext context) {
  showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.0),
            topRight: Radius.circular(20.0),
          ), // 设置顶部边角的半径
        ),
        child: Center(
          child: Text('这是一个带有边界半径的BottomSheet'),
        ),
      );
    },
  );
}

实例应用

假设我们开发一个应用，需要在用户点击某个按钮时弹出BottomSheet，并且这个BottomSheet有自定义的高度以及圆润的顶部边界。我们可以像上面的代码片段那样，通过包裹Container，设置高度和装饰的方式来调整BottomSheet的外观。

这种方式不仅使BottomSheet看上去更符合特定的设计需求，同时也提高了UI的用户体验。通过以上的示例代码，可以看到Flutter提供的灵活性是如何帮助开发者实现各种自定义UI组件的。