Question

当我的应用启动时，一些数据将在后台加载，我当时不希望用户单击Drawer图标，所以我做了类似的事情。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Title'),
    ),
    drawer: _isLoading ? null : HomeDrawer(),
    body: _isLoading ? CircularProgressIndicator() : _body(),
  );
}

在这种情况下，当应用加载抽屉按钮时不可见

加载后，按钮会返回。

我想要的是 抽屉按钮在加载状态下应该可见，但不能单击。

Answer 1

我使用了自定义抽屉按钮，该按钮基于_isLoaded变量分配/删除了它的onPressed事件。自页面加载3秒后，我将_isLoaded变量值设置为true，这将重新渲染页面并启用抽屉按钮并隐藏加载器。

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoaded = false;
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();

    this._apiCallSample();
  }

  void _apiCallSample() async {
    await Future.delayed(Duration(seconds: 3)).then((_) {
      setState(() {
        this._isLoaded = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: !this._isLoaded ? null : () => this._scaffoldKey.currentState.openDrawer(),
        ),
        title: Text("Drawer"),
      ),
      body: Center(
        child: Builder(
          builder: (BuildContext context) {
            if(!this._isLoaded) {
              return CircularProgressIndicator();
            }

            return Text("Loaded!");
          },
        ),
      ),
      drawer: Drawer(
        child: Center(
          child: Text("Drawer"),
        ),
      ),
      key: this._scaffoldKey,
    );
  }
}

如果要阻止用户单击页面上的任何地方，请使用AbsorbPointer。

当吸收为true时，此小部件通过自身终止命中测试来防止其子树接收指针事件。

Answer 2

您可以尝试一下。

bool _isLoading = false;
GlobalKey<ScaffoldState> _key = GlobalKey();

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _key,
    appBar: AppBar(
      title: Text("App"),
      leading: IconButton(
        icon: Icon(Icons.menu),
        onPressed: _isLoading ? null : () => _key.currentState.openDrawer(),
      ),
    ),
    drawer: YourDrawer(),
  );
}

如何在Flutter中使抽屉按钮不可点击

2 个答案: