状态设置时可见性小部件不隐藏答案

【问题标题】：Visibility widget not hiding when state set状态设置时可见性小部件不隐藏
【发布时间】：2021-05-12 07:16:03
【问题描述】：

当用户在状态之间跳转时会触发可见性，我遇到了很多麻烦。我的入职小部件在页面顶部有一个标题，但是当用户导航到第二条路线时，我希望它消失并显示一个完整的出血容器。

这是我的小部件：

library activate;

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


class Step1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Step 1")
  }
}

class Step2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Step 2")
  }
}

class OnboardActivate extends StatefulWidget {
  @override
  OnboardActivateState createState() => new OnboardActivateState();
}

class OnboardActivateState extends State<OnboardActivate> {
  @override
  Widget build(BuildContext context) {
    bool _isHeaderVisible = true;
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: Column(children: [
        SafeArea(
          child: Visibility(
            visible: _isHeaderVisible,
            child: Padding(
              padding: EdgeInsets.only(
                top: 35,
                left: 35,
                right: 35,
                bottom: 15,
              ),
              child: Column(children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Text(
                      "Step 1 of 4".toUpperCase(),
                      style: Theme.of(context)
                          .textTheme
                          .subtitle1
                          .copyWith(color: Colors.white),
                    ),
                  ],
                ),
                Row(children: [
                  Text(
                    "A fun welcome message!",
                    style: Theme.of(context).textTheme.headline2,
                  ),
                ]),
              ]),
            ),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(
            padding: EdgeInsets.only(top: 35, right: 35, left: 35),
            margin: EdgeInsets.only(left: 10, right: 10, top: 10),
            decoration: new BoxDecoration(
              color: Colors.white,
              borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(20.0),
                topRight: const Radius.circular(20.0),
              ),
            ),
            child: Navigator(
              initialRoute: '/',
              onGenerateRoute: (RouteSettings settings) {
                WidgetBuilder builder;
                switch (settings.name) {
                  case '/':
                    builder = (BuildContext _) => Step1();
                    break;
                  case '/step2':
                    builder = (BuildContext _) => Step2();
                    setState(() {
                      _isHeaderVisible = false;
                    });
                    break;
                }
                return MaterialPageRoute(builder: builder, settings: settings);
              },
            ),
          ),
        ),
      ]),
    );
  }
}

这是 UI 设计本身的一个示例。左侧是显示/ 根时的状态。右侧是显示/step2 时。我对 UI 区域内的内容使用导航器，并且它之外的内容在所有其他路线上都是装饰性的。在第 1 步之后，虽然我希望标题不可见。最终我很想让它动画，但现在只是理清为什么 Visible 小部件没有效果很重要。我在想也许我必须触发重新渲染？

【问题讨论】：

标签： flutter

【解决方案1】：

_isHeaderVisible 设置不同后还是一样的。只需将其移出build 方法，让它保留最后一个值。

class OnboardActivateState extends State<OnboardActivate> {

  bool _isHeaderVisible;

  initState(){
    _isHeaderVisible = true;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //  bool _isHeaderVisible = true; <== REMOVE
    ...

【讨论】：

哈哈哇。现在我觉得很傻。抱歉，Dart/Flutter 的新手。我刚刚阅读了构建方法，现在我对它的理解好多了。这更有意义。谢谢。