Question

我正在学习颤振中的扩展磁贴。关闭扩展图块之前，有什么方法可以显示弹出窗口？如果按确定，则关闭扩展图块；如果按取消，则保持扩展图块的状态。我该怎么办？

Answer 1

ExpansionTile文档指出它具有属性onExpansionChanged：

在图块展开或折叠时调用。

当图块开始扩展时，将使用值true调用此函数。当图块开始崩溃时，将使用值false调用此函数。

一种方法是将该属性（例如，每当您收到false时）与类似showDialog的东西组合：

在应用程序当前内容上方显示“材料”对话框，其中包含“材料”入口和出口动画，模态屏障颜色和模态屏障行为（通过轻按屏障可关闭对话框）。

编辑-解决已编辑的问题：

以编程方式扩展/折叠ExpansionTile似乎有些问题。在Flutter存储库中有一个issue。

但是，我相信您可以通过扩展this answer中讨论的ExpansionTile来实现您的目标。不过，这有点涉及。

另一种方法是使用ExpansionPanelList和ExapnsionPanels，如建议here所示。我在下面包括了一个有效的（但粗略的）概念验证应用程序。随时进行修改并使其适应您的需求。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expanding panels',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool expanded = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pushing data'),
      ),
      body: Center(
        child: Card(
          child: Column(
            children: <Widget>[
              ExpansionPanelList(
                expansionCallback: (int index, bool status) {
                  if (status == true) {
                    showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: new Text('Alert Dialog'),
                          content: new Text('What do you want to do?'),
                          actions: <Widget>[
                            FlatButton(
                              child: Text('Cancel'),
                              onPressed: () => Navigator.of(context).pop(),
                            ),
                            FlatButton(
                              child: Text(
                                'Collapse',
                                style: TextStyle(color: Colors.red),
                              ),
                              onPressed: () {
                                setState(() {
                                  expanded = false;
                                });
                                Navigator.of(context).pop();
                              },
                            ),
                          ],
                        );
                      },
                    );
                  } else {
                    setState(() {
                      expanded = true;
                    });
                  }
                },
                children: [
                  ExpansionPanel(
                    canTapOnHeader: true,
                    isExpanded: expanded,
                    headerBuilder: (BuildContext context, bool expanded) {
                      return Text('Expansion Panel Header');
                    },
                    body: Center(
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                        child: Text('Expanded panel body'),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

如何通过在弹出窗口中显示弹出消息来在关闭扩展图块之前警告用户？

1 个答案: