logo标签列表

如何在Flutter中创建带有圆形角的模态底部表单？

flutterflutter-layout
130

showModalBottomSheet并没有提供任何样式或装饰。我想创建类似于Google任务底部弹出表的东西。

Google任务底部弹出表

使用showModalBottomSheet形状属性，该属性接受ShapeBorder。 - Code with Benji
17个回答
4
    showModalBottomSheet(
     backgroundColor: Colors.transparent,
     context: context,
     builder: (ctx) {
      return Container( 
      decoration: BoxDecoration(
      color: Colors.green, // or some other color
      borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10.0),
      topRight: Radius.circular(10.0)
       ) 
     );
    });
3
您可以在装饰容器中设置borderRadius。
 showModalBottomSheet(
                context: context,
                builder: (builder){
                  return  Container(
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.only(
                                topLeft: const Radius.circular(15.0),
                                topRight: const Radius.circular(15.0))),
                        child: Center(
                          child: Text("This is a modal sheet"),
                        ),
                  );
                }
            );
3

对于持久的底部菜单，需要在Material App小部件的主题属性中添加以下代码：

ThemeData(          
          bottomSheetTheme: BottomSheetThemeData(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
2
showModalBottomSheet(
  context:context
  shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(20),
        ),
      ),
  clipBehavior: Clip.hardEdge,
)

使用Clip.hardEdge会更好。它比其他剪切模式更快，但比[无]模式慢。

1

现在，您可以使用showModelBottomSheet()小部件参数形状来完成它

showModalBottomSheet<void>(
           shape: const RoundedRectangleBorder(
                  borderRadius:  BorderRadius.only(topLeft: 
                      Radius.circular(24),topRight:Radius.circular(24) ),),
                          context: context,
                          builder: (BuildContext context) {}
1
使用showModalBottomSheet

形状：

属性，可以像以下示例一样接受ShapeBorder

 shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(25.0)),
    ),

enter image description here

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接