前端之家

  1. 首页
  2. 问答

Flutter：BorderRadius在showGeneralDialog下不起作用

• 问答

为什么BorderRadius下的showGeneralDialog不起作用？ 这是我的代码- 

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key,this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),actions: <Widget>[
            IconButton(
                icon: Icon(Icons.arrow_downward),splashColor: Colors.red,onpressed: _showDrawer)
          ],),body: Container(
            color: Colors.white,height: MediaQuery.of(context).size.height,width: MediaQuery.of(context).size.width,child: Center(child: Text("This Is Body"))),);
  }

  _showDrawer() {
    return showGeneralDialog(
      context: context,barrierDismissible: true,transitionDuration: Duration(milliseconds: 600),barrierLabel: MaterialLocalizations.of(context).dialogLabel,barrierColor: Colors.black.withOpacity(0.5),pageBuilder: (context,_,__) {
        return SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height / 2.5,padding: EdgeInsets.all(0),decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    bottomLeft:
                        Radius.circular(50.0),//This Border Radius doesn't Work
                  ),boxShadow: [
                    BoxShadow(
                        color: Colors.black12,blurRadius: 3.0,spreadRadius: 3.0),],child: Material(
                  child: ListView(
                    children: <Widget>[
                      Align(
                        alignment: Alignment.topRight,child: IconButton(
                            icon: Icon(Icons.close),onpressed: () {
                              Navigator.pop(context,false);
                            }),Align(
                        alignment: Alignment.topCenter,child: Clipoval(
                            child: Image.asset(
                          "assets/images/avator.jpg",width: MediaQuery.of(context).size.height / 10,height: MediaQuery.of(context).size.height / 10,fit: BoxFit.cover,)),child: Text(
                          "Abir Ahsan",style: TextStyle(
                              color: Colors.black,fontWeight: FontWeight.bold,fontSize: 20),child: Text(
                          "abirahsan122@gmail.com",style: TextStyle(
                            fontStyle: FontStyle.italic,Padding(
                        padding: EdgeInsets.all(20.0),child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
                            Text(
                              "Menu",style: TextStyle(
                                  fontSize: 15.0,fontWeight: FontWeight.bold),Text(
                              "Offers",Text(
                              "My Cart",Text(
                              "Last Orders",Text(
                              "Favourite",Text(
                              "My Settings",)
                          ],)
                    ],);
      },transitionBuilder: (context,animation,secondaryAnimation,child) {
        return SlideTransition(
          position: CurvedAnimation(
            parent: animation,curve: Curves.easeOut,).drive(Tween<Offset>(
            begin: Offset(0,-1.0),end: Offset.zero,child: child,);
  }
}
iCMS 回答：Flutter：BorderRadius在showGeneralDialog下不起作用

Container BoxDecoration在材质组件上绘画，但是该页面中树上方没有材料，您使用的第一个材料在容器下方。同样来自文档

形状或borderRadius不会修剪装饰的Container的子级。如果需要剪辑，请插入剪辑小部件（例如ClipRect，ClipRRect，ClipPath）作为Container的子级。请注意，就性能而言，裁剪可能会付出高昂的代价

例如，如果您将颜色应用于BoxDecoration 

BoxDecoration(
   color: Colors.green,//For example this color
   borderRadius: BorderRadius.only(
   bottomLeft:
     Radius.circular(50.0),//This Border Radius doesn't Work
   ),boxShadow: [
     BoxShadow(
       color: Colors.black12,blurRadius: 3.0,spreadRadius: 3.0
    ),],),

您仍然会看到材料的颜色（容器的子级）。在这种情况下，解决该问题的方法是将装饰应用于材料

Container(
  width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height / 2.5,padding: EdgeInsets.zero,child: Material(
     elevation: 8,shadowColor: Colors.black12,borderRadius: BorderRadius.only(
       bottomLeft:
       Radius.circular(50.0),//Use the border raidus property of the Material
     ),child: ... //The ListView and everything else
  )
)

或者您可以使用容器上方的“材质”，然后使用其BoxDecoration，它将具有相同的效果

Material(
  type: MaterialType.transparency,//Transparent so you don't see a color below other than the one of the container
  child: Container(
     width: MediaQuery.of(context).size.width,decoration: BoxDecoration(
       color: Colors.green,//This color now applies correctly
       borderRadius: BorderRadius.only(
         bottomLeft:
         Radius.circular(50.0),boxShadow: [
         BoxShadow(
         color: Colors.black12,spreadRadius: 3.0),child: ... //The ListView and everything else
  ),)
borderfluttershowdialog
本文链接：https://www.f2er.com/2143659.html

大家都在问