Question

我有一个普通页面作为settings.dart :)像这样。但是大部分页面是空的。我想将此页面的较小版本用作对话框。当我单击设置图标时，将弹出此对话框页面。我该怎么办？

build{
return Scaffold(
body: Column(
children: <Widget>[
Text('SETTINGS')
Button
Button
Button
...
]

Answer 1

在已设置功能的设置按钮上

      onPressed: () {
        showDialog(
          context: context,
          child: Dialog(
            child: settings.dartPage(),
          ),
        );
      },

但是您需要删除settings.dart中的Scaffold小部件以使其变小（与普通对话框的大小相同），并进行一些自定义更改其外观

Answer 2

您可以使用 Stack小部件来完成此操作。

将Scaffold包裹在“ AnimatedOpacity”小部件中，并提供不透明度和持续时间的值。
声明一个全局double scaffoldOpacity = 1.0，以便在对话框出现时轻松更改支架的不透明度，并在对话框消失时将其更改回原来的位置。
用AnimatedOpacity小部件包裹Stack小部件，然后将SettingPage()小部件放在包裹有动画小部件的支架上方。
将Settings()小部件包装在Visibility小部件中，并提供一个bool isSettingsOpen在对话框的两种状态之间切换。

以下是代码示例：

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  double scaffoldOpacity = 1.0;
  bool isSettingsOpen = false;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        AnimatedOpacity(
          opacity: scaffoldOpacity,
          duration: Duration(milliseconds: 100),
          child: Scaffold(
            appBar: AppBar(
              leading: FlatButton(
                child: Icon(Icons.settings),
                onPressed: () {
                  setState(() {
                    scaffoldOpacity = 0.3;
                    isSettingsOpen = true;
                  });
                },
              ),
              title: Text('Main Page'),
            ),
            body: Container(
              color: Colors.white,
              child: Text('MAIN PAGE BODY'),
            ),
          ),
        ),
        Visibility(
            visible: isSettingsOpen,
            child: Container(
              child: Column(
                children: <Widget>[
                  Text('Settings'),
                  //Button,

                  //Button to close settings dialog
                  FlatButton(
                    child: Icon(Icons.close),
                    onPressed: () {
                      setState(() {
                        scaffoldOpacity = 1.0;
                        isSettingsOpen = false;
                      });
                    },
                  ),

                  // rest of the settings page ui
                ],
              ),
            )),
      ],
    );
  }
}

如何使用普通页面作为对话框-Flutter

2 个答案: