显示按钮状态颤振

Question

我希望我的按钮仅在我的 _isloading 条件为假时显示。使用我的代码，按钮出现但为时过早。

我的插件：

我想要我的按钮在我的计时器设置 _isLoading = false 之后。实际上，我的按钮直接显示为启动计时器。

如何让我的按钮仅在我的计时器设置我的 _isLoading = false 时显示？

Answer 1

首先，您需要牢记Flutter 的树状widget 结构。树层次结构应该只包含小部件。

在您的 _validateUser() 中，由于此方法 return 不是 Widget，因此不能将其作为 Column 小部件的子项。此方法应由按钮触发（例如，在用户完成表单后）。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:modal_progress_hud/modal_progress_hud.dart';

void main() {
  runApp(MaterialApp(home: Home()));
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  bool _isLoading = false;
  bool _isValidated = false;

  _validateUser() async {
    setState(() {
      _isLoading = true;
    });
    await Future.delayed(Duration(seconds: 3), () {
      setState(() {
        _isLoading = false;
        _isValidated = true;
      });
    });
  }

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _validateUser();
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      resizeToAvoidBottomInset: false,
      key: _scaffoldKey,
      body: Center(
        child: ModalProgressHUD(
          inAsyncCall: _isLoading,
          child: Container(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // FlatButton(
                //   color: Colors.red,
                //   child: Text("Validate User"),
                //   onPressed: _validateUser,
                // ),
                // SizedBox(height: 10),
                if (_isValidated)
                  FlatButton(
                    color: Colors.green,
                    child: Text("Validate User"),
                    onPressed: _validateUser,
                  ),
              ],
            ),
          ),
        ),
      ),
    ));
  }
}

显示按钮状态颤振

show button condition flutter

timer

dart

flutter