那些遇到过的问题

警报对话框中有圆角

Ros*_*ary 13 flutter flutter-test flutter-layout flutter-animation

我正在尝试使用Flutter中的圆角创建一个警告对话框,如下面的屏幕截图所示.也在这里添加我的代码,但我的输出与预期的完全不同.有人,请帮帮我.

预期警报对话框

预期警报对话框

我的代码在这里.

void _showAlert() {
AlertDialog dialog = new AlertDialog(
  content: new Container(
    width: 260.0,
    height: 230.0,
    decoration: new BoxDecoration(
      shape: BoxShape.rectangle,
      color: const Color(0xFFFFFF),
      borderRadius: new BorderRadius.all(new Radius.circular(32.0)),
    ),
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        // dialog top
        new Expanded(
          child: new Row(
            children: <Widget>[
              new Container(
                // padding: new EdgeInsets.all(10.0),
                decoration: new BoxDecoration(
                  color: Colors.white,
                ),
                child: new Text(
                  'Rate',
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 18.0,
                    fontFamily: 'helvetica_neue_light',
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),

        // dialog centre
        new Expanded(
          child: new Container(
              child: new TextField(
            decoration: new InputDecoration(
              border: InputBorder.none,
              filled: false,
              contentPadding: new EdgeInsets.only(
                  left: 10.0, top: 10.0, bottom: 10.0, right: 10.0),
              hintText: ' add review',
              hintStyle: new TextStyle(
                color: Colors.grey.shade500,
                fontSize: 12.0,
                fontFamily: 'helvetica_neue_light',
              ),
            ),
          )),
          flex: 2,
        ),

        // dialog bottom
        new Expanded(
          child: new Container(
            padding: new EdgeInsets.all(16.0),
            decoration: new BoxDecoration(
              color: const Color(0xFF33b17c),
            ),
            child: new Text(
              'Rate product',
              style: TextStyle(
                color: Colors.white,
                fontSize: 18.0,
                fontFamily: 'helvetica_neue_light',
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ],
    ),
  ),
);

showDialog(context: context, child: dialog);
}
}
Run Code Online (Sandbox Code Playgroud)

我从上面的代码得到的输出是.

截图

Sar*_*jar 32

虽然我迟到了解决方案,但这可能有助于其他人搜索它.以下代码片段详细说明了如何实现它. 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
Color myColor = Color(0xff00bfa5);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Rounde Alert Box",
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: myColor,
          title: Text("Rounded Alert Box"),
        ),
        body: RoundedAlertBox(),
      ),
    );
  }
}

class RoundedAlertBox extends StatefulWidget {
  @override
  _RoundedAlertBoxState createState() => _RoundedAlertBoxState();
}

class _RoundedAlertBoxState extends State<RoundedAlertBox> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: openAlertBox,
        color: myColor,
        child: Text(
          "Open Alert Box",
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  openAlertBox() {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(32.0))),
            contentPadding: EdgeInsets.only(top: 10.0),
            content: Container(
              width: 300.0,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Text(
                        "Rate",
                        style: TextStyle(fontSize: 24.0),
                      ),
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Icon(
                            Icons.star_border,
                            color: myColor,
                            size: 30.0,
                          ),
                          Icon(
                            Icons.star_border,
                            color: myColor,
                            size: 30.0,
                          ),
                          Icon(
                            Icons.star_border,
                            color: myColor,
                            size: 30.0,
                          ),
                          Icon(
                            Icons.star_border,
                            color: myColor,
                            size: 30.0,
                          ),
                          Icon(
                            Icons.star_border,
                            color: myColor,
                            size: 30.0,
                          ),
                        ],
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 5.0,
                  ),
                  Divider(
                    color: Colors.grey,
                    height: 4.0,
                  ),
                  Padding(
                    padding: EdgeInsets.only(left: 30.0, right: 30.0),
                    child: TextField(
                      decoration: InputDecoration(
                        hintText: "Add Review",
                        border: InputBorder.none,
                      ),
                      maxLines: 8,
                    ),
                  ),
                  InkWell(
                    child: Container(
                      padding: EdgeInsets.only(top: 20.0, bottom: 20.0),
                      decoration: BoxDecoration(
                        color: myColor,
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(32.0),
                            bottomRight: Radius.circular(32.0)),
                      ),
                      child: Text(
                        "Rate Product",
                        style: TextStyle(color: Colors.white),
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }
}
Run Code Online (Sandbox Code Playgroud)

代码段的输出如下所示: 圆形警报框

Bos*_*rot 23

您设置BoxDecoration的容器位于警报对话框下的窗口小部件树中.这意味着您只需在Dialog的填充中设置一个框.您需要创建自定义AlertDialog/showDialog并在那里设置半径.在自定义小部件中,您还可以添加按钮以及除填充之外需要工作的所有内容.

当你在项目中包含customShowDialog.dart文件(gist.github.com)时,你可以在这里编辑半径borderRadius: BorderRadius.all(Radius.circular(20.0))并像这样调用它:

return new CustomAlertDialog(
    content: new Container(
        width: 260.0,
        height: 230.0,
        decoration: new BoxDecoration(
        shape: BoxShape.rectangle,
        color: const Color(0xFFFFFF),
        borderRadius:
            new BorderRadius.all(new Radius.circular(32.0)),
        ),
        child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
            // dialog top
            new Expanded(
            child: new Row(
                children: <Widget>[
                new Container(
                    // padding: new EdgeInsets.all(10.0),
                    decoration: new BoxDecoration(
                    color: Colors.white,
                    ),
                    child: new Text(
                    'Rate',
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 18.0,
                        fontFamily: 'helvetica_neue_light',
                    ),
                    textAlign: TextAlign.center,
                    ),
                ),
                ],
            ),
            ),

            // dialog centre
            new Expanded(
            child: new Container(
                child: new TextField(
                decoration: new InputDecoration(
                border: InputBorder.none,
                filled: false,
                contentPadding: new EdgeInsets.only(
                    left: 10.0,
                    top: 10.0,
                    bottom: 10.0,
                    right: 10.0),
                hintText: ' add review',
                hintStyle: new TextStyle(
                    color: Colors.grey.shade500,
                    fontSize: 12.0,
                    fontFamily: 'helvetica_neue_light',
                ),
                ),
            )),
            flex: 2,
            ),

            // dialog bottom
            new Expanded(
            child: new Container(
                padding: new EdgeInsets.all(16.0),
                decoration: new BoxDecoration(
                color: const Color(0xFF33b17c),
                ),
                child: new Text(
                'Rate product',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18.0,
                    fontFamily: 'helvetica_neue_light',
                ),
                textAlign: TextAlign.center,
                ),
            ),
            ),
        ],
        ),
    ),
    );
});
Run Code Online (Sandbox Code Playgroud)

你会得到这样的东西:

在此输入图像描述

  • 你的类 `customAlertDialog` 应该是初始上限的。 (2认同)

小智 18

这为我工作：

   shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(32.0))),
Run Code Online (Sandbox Code Playgroud)

jei*_*ias 10

添加

showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0))),
            title: Text("Loading..."),
            content: CircularProgressIndicator(),
          );
        },
      );
Run Code Online (Sandbox Code Playgroud)

Moh*_*mel 7

试试这个代码 

showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(10.0),
                   ),
            title: Text('title'),
            content: Text('content'),
          );
        },
      );
Run Code Online (Sandbox Code Playgroud)

小智 6

尝试添加 

shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0))
         
);
Run Code Online (Sandbox Code Playgroud)

小智 5

试试这个代码：

AlertDialog(
   shape: RoundedRectangleBorder(borderRadius: 
    BorderRadius.all(Radius.circular(15))),
    title: Text('Your title!'),
    content: Container(),
);
Run Code Online (Sandbox Code Playgroud)

pen*_*uru 5

您可以简单地使用 AlertDialog 的 shape 属性

shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(16)))
Run Code Online (Sandbox Code Playgroud)

Kav*_*ana 5

像这样使用

AlertDialog(
  shape:RoundedRectangleBorder(
    borderRadius:BorderRadius.circular(10.0,),
  ),
  content: yourContent()
);
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

17292 次

最近记录：

6 年，5 月 前
相关归档
Flutter，带有声明的 Late 关键字 17
如何在 Flutter 中处理 Google Play 兑换促销代码？ 10
类型转换错误中，类型“Null”不是类型“Map&lt;String,dynamic&gt;”的子类型 9
pod install 遇到 grpc-core 1.50.1 问题 9
在颤振网络中播放视频 8
如何在颤动的底部导航栏中添加抽屉？ 6
是否有明确的Sliver小部件列表 5
边界半径不适用于容器小部件 5
MissingPluginException captureScreenshot 截图 iOS Flutter 5
如何绘制彼此重叠的圆形头像的水平列表 1
难疑归档
如何在Linux上找到包含特定文本的所有文件？ 4914
Java中的public,protected,package-private和private有什么区别？ 3004
从Git存储库中删除文件而不从本地文件系统中删除它 2892
如何检查对象是否是数组？ 2581
Git获取远程分支 2088
如何从Java中的字符串值获取枚举值？ 1890
什么是未定义的引用/未解析的外部符号错误,我该如何解决？ 1418
如何使用Sublime Text 2重新格式化HTML代码？ 1282
Pythonic方式创建一个长多行字符串 1160
"正确"的JSON日期格式 1071