Question

我目前正在开发一个应用程序，其中包含一组规则，我希望它们在单击帮助时显示，我已经找到了onClick处理工具，但我想知道如何制作带有模式的CSS，例如角落里的关闭按钮？

我尝试使用堆栈小部件，但对结果不完全满意，并且无法将inkWell飞溅效果移至彩色框顶部

Answer 1

您可以将showDialog与AlertDialog一起使用，并在其中放置小部件。

这是代码


  _showDialog() {
    return showDialog(
        context: context,
        barrierDismissible: false,
        builder: (context) {
          return AlertDialog(
            contentPadding: const EdgeInsets.all(12.0),
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text("Title", style: Theme.of(context).textTheme.title),
                    // IconButton(padding: const EdgeInsets.all(0), alignment: Alignment(1, 0), onPressed: () => Navigator.pop(context), icon: Icon(Icons.clear))
                    InkWell(
                      child: Icon(Icons.clear),
                      onTap: () => Navigator.pop(context),
                    ),
                    // )
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 10.0),
                  child: Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra eros vitae neque faucibus ullamcorper. Nam lobortis hendrerit est vel malesuada. Fusce sem nisi, luctus sit amet nunc at, tempor ullamcorper leo. Donec tempor erat eget vehicula cursus. Nulla fringilla vestibulum libero. Maecenas viverra rhoncus urna ut aliquet. Donec rutrum viverra pulvinar. Nulla tempus mollis elementum. Quisque a cursus tellus, id finibus leo. Nulla facilisi. Nunc eget nibh id turpis commodo tincidunt."),
                )
              ],
            ),
          );
        });
  }

如果要在单击背景幕时关闭该对话框，请将barrierDismissible设置为true。

注意-如果内容很长，则可能需要在固定高度ListView内添加一个Container，如下所示

Container(
   height: 150,
   child: ListView(
   itemExtent: 50.0,
   children: <Widget>[
     Text("Text 1"),
     Text("Text 2"),
     Text("Text 3"),
     Text("Text 4"),
     Text("Text 5"),
     Text("Text 6"),
     Text("Text 7"),
     Text("Text 8"),
     ],
   ),
)

Answer 2

您可以使用插件 flutter_progress_hud

只需使其成为您的小部件页面的父项，并使用of（context）.show（）/。dismiss（）即可显示和隐藏它

@override   Widget build(BuildContext context) {    return ProgressHUD(
      backgroundColor: Colors.transparent,
      barrierColor: Color.fromRGBO(100, 100, 100, 0.25),
      borderColor: Colors.transparent,
      indicatorColor: Colors.orangeAccent,
      indicatorWidget: CircularProgressIndicator(),
      child:Scaffold(child:
      FlatButton(onPressed:()=>ProgressHUD.of(context).show()));}

有没有办法使css像模式那样颤动？

2 个答案: