在flutter中使用圆角的警示对话框

Question

10 浏览2023年1月15日

匿名的 2023年1月15日

0 Comments

我正在尝试在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: [
          // 对话框顶部
          new Expanded(
            child: new Row(
              children: [
                new Container(
                  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,
                  ),
                ),
              ],
            ),
          ),
          // 对话框中心
          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: '添加评论',
                  hintStyle: new TextStyle(
                    color: Colors.grey.shade500,
                    fontSize: 12.0,
                    fontFamily: 'helvetica_neue_light',
                  ),
                ),
              ),
            ),
            flex: 2,
          ),
          // 对话框底部
          new Expanded(
            child: new Container(
              padding: new EdgeInsets.all(16.0),
              decoration: new BoxDecoration(
                color: const Color(0xFF33b17c),
              ),
              child: new Text(
                '评价产品',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18.0,
                  fontFamily: 'helvetica_neue_light',
                ),
                textAlign: TextAlign.center,
              ),
            ),
          ),
        ],
      ),
    ),
  );
  showDialog(context: context, child: dialog);
}

}

我从上述代码中得到的输出结果是。

0

3 答案

匿名的 · Answer 1 · 2023-07-13T19:27:27+00:00

问题的原因是AlertDialog在Flutter中默认没有圆角。为了解决这个问题，可以添加shape属性，并设置RoundedRectangleBorder的borderRadius属性为BorderRadius.all(Radius.circular(32.0))。具体的解决方法如下：

在AlertDialog中添加shape属性，并设置为RoundedRectangleBorder，borderRadius属性为BorderRadius.all(Radius.circular(32.0))。

示例代码如下：

AlertDialog(


  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(32.0))),
  title: Text('Alert Dialog with Rounded Corners'),
  content: Text('This is an example of an alert dialog with rounded corners.'),
  actions: [
    FlatButton(
      child: Text('OK'),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ],
);

以上就是在Flutter中实现带有圆角的AlertDialog的解决方法。通过添加shape属性，并设置RoundedRectangleBorder的borderRadius属性，我们可以轻松地给AlertDialog添加圆角效果。

匿名的 · Answer 2 · 2023-07-21T13:26:10+00:00

问题的原因是在AlertDialog的widget树下设置了一个具有BoxDecoration的容器，这意味着你只是在对话框的填充内设置了一个框。你需要创建一个自定义的AlertDialog/showDialog，并在那里设置半径。在自定义的widget中，你还可以添加你需要超出填充的按钮和其他内容。

解决方法是将customShowDialog.dart文件包含在你的项目中，你可以在其中编辑半径，然后像这样调用它：

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: [
        // dialog top
        new Expanded(
          child: new Row(
            children: [
              new Container(
                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,
            ),
          ),
        ),
      ],
    ),
  ),
);

通过以上方法，你将得到如下效果：

[图片](https://i.stack.imgur.com/YPEBqm.png)

注意：尽管Flutter最近引入了shape属性来帮助你通过设置ShapeBorder的方式实现圆角效果，例如：

shape: RoundedRectangleBorder(


  borderRadius: BorderRadius.all(Radius.circular(20.0))
),

但如果你需要快速添加自定义的填充等自定义内容，仍然需要使用自定义的widget，如上所述。

同时，你的customAlertDialog类应该首字母大写。

匿名的 · Answer 3 · 2023-07-18T23:25:40+00:00

问题出现的原因：在Flutter中，AlertDialog默认没有圆角边框，因此需要对AlertDialog的形状进行自定义。

解决方法：在AlertDialog的builder方法中，设置AlertDialog的shape属性为RoundedRectangleBorder，并在AlertDialog的内容Container中添加一个DecoratedBox，设置圆角边框。

具体代码如下：


import 'package:flutter/material.dart';
void main() => runApp(MyApp());
Color myColor = Color(0xff00bfa5);
class MyApp extends StatelessWidget {
  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 {
  _RoundedAlertBoxState createState() => _RoundedAlertBoxState();
}
class _RoundedAlertBoxState extends State {
  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: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        "Rate",
                        style: TextStyle(fontSize: 24.0),
                      ),
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          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,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        });
  }
}

运行结果如下：

![Rounded Alert Box](https://i.stack.imgur.com/i4FKB.png)

通过设置AlertDialog的shape属性为RoundedRectangleBorder，并在AlertDialog的内容Container中添加一个DecoratedBox，我们成功实现了带有圆角边框的AlertDialog。