如何在 Flutter 中隐藏浮动操作按钮答案

【问题标题】：How to hide Floating Action Button in Flutter如何在 Flutter 中隐藏浮动操作按钮
【发布时间】：2021-01-27 14:43:48
【问题描述】：

我是 Flutter 的初学者，我是第一次使用 Futurebuilder 和 provider。最后，我创建了一个添加地点的应用程序。使用下面的代码，我几乎已经实现了该应用程序。但是现在出现了一个小问题。当应用程序从提供者获取数据时，它会显示浮动操作按钮。我不希望这种情况发生。有没有办法在获取数据时隐藏浮动操作按钮，并在从数据库中获取数据后显示给用户？

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

import './add_place_screen.dart';
import '../providers/great_places.dart';
import './place_detail_screen.dart';

class PlacesListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Places'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              Navigator.of(context).pushNamed(AddPlaceScreen.routeName);
            },
          ),
        ],
      ),
      body: FutureBuilder(
        future: Provider.of<GreatPlaces>(context, listen: false)
            .fetchAndSetPlaces(),
        builder: (ctx, snapshot) => snapshot.connectionState ==
                ConnectionState.waiting
            ? Center(
                child: CircularProgressIndicator(),
              )
            : Consumer<GreatPlaces>(
                child: Center(
                  child: const Text('Got no places yet, start adding some!'),
                ),
                builder: (ctx, greatPlaces, ch) => greatPlaces.items.length <= 0
                    ? ch
                    : ListView.builder(
                        itemCount: greatPlaces.items.length,
                        itemBuilder: (ctx, i) => ListTile(
                              leading: CircleAvatar(
                                backgroundImage: FileImage(
                                  greatPlaces.items[i].image,
                                ),
                              ),
                              title: Text(greatPlaces.items[i].title),
                              subtitle:
                                  Text(greatPlaces.items[i].location.address),
                              onTap: () {
                                Navigator.of(context).pushNamed(
                                  PlaceDetailScreen.routeName,
                                  arguments: greatPlaces.items[i].id,
                                );
                              },
                            ),
                      ),
              ),
      
      ),
floatingActionButton:  FloatingActionButton(
            onPressed: () {
                         },
            child: Icon(Icons.add),
          ),      
  

  );
  
  }
}

【问题讨论】：

您在哪里更改_visibility 变量？ , 开头为空。请提供完整的代码。
对不起.. 我的错误更新没有可见性小部件

标签： flutter flutter-dependencies floating-action-button flutter-futurebuilder

【解决方案1】：

class PlacesListScreen extends StatelessWidget {
 var fbVisible = false;
......

builder: (ctx, greatPlaces, ch) {
if (greatPlaces.items.length <= 0){
fbVisible = false;
return ch;
}
else {
fbVisible = true;                    
return ListView.builder(
.....

    floatingActionButton:  Visibility(visible:fbVisible,
    child:
    FloatingActionButton(
                onPressed: () {
                             },
                child: Icon(Icons.add),
              )),

【讨论】：

好主意。但不能像那样访问 greatPlaces。该怎么做？

【解决方案2】：

让你的类成为 StatefulWidget 而不是 StatelessWidget。这将有助于实现浮动操作按钮的可见性。并尝试在 build 方法中处理 setstate(){}，该方法会在状态更改时不断调用。

【讨论】：

怎么做？请更详细地解释这将是有帮助的
那么它会再次调用futurebuilder...实际上我不确定..你确定吗？
@beginner 检查api.flutter.dev/flutter/widgets/StatefulWidget-class.html
setState() 或 markNeedsBuild 在构建异常时调用
@beginner setState 如果处理不当会抛出异常。我的意思是，您需要根据构建器方法快照中可用的数据来处理可见性标志的 setState 的粗略想法。

【解决方案3】：

你可以试试 ValueNotifier，https://api.flutter.dev/flutter/foundation/ValueNotifier-class.html

保存单个值的 ChangeNotifier。

当值被替换为不等于由相等运算符 == 评估的旧值时，此类会通知其侦听器。

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

import './add_place_screen.dart';
import '../providers/great_places.dart';
import './place_detail_screen.dart';

class PlacesListScreen extends StatelessWidget {
  final ValueNotifier<bool> _isWaiting = ValueNotifier<bool>(false);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Places'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              Navigator.of(context).pushNamed(AddPlaceScreen.routeName);
            },
          ),
        ],
      ),
      body: FutureBuilder(
          future: Provider.of<GreatPlaces>(context, listen: false)
              .fetchAndSetPlaces(),
          builder: (ctx, snapshot) {
            _isWaiting.value =
                snapshot.connectionState == ConnectionState.waiting;

            return _isWaiting.value
                ? Center(
                    child: CircularProgressIndicator(),
                  )
                : Consumer<GreatPlaces>(
                    child: Center(
                      child:
                          const Text('Got no places yet, start adding some!'),
                    ),
                    builder: (ctx, greatPlaces, ch) =>
                        greatPlaces.items.length <= 0
                            ? ch
                            : ListView.builder(
                                itemCount: greatPlaces.items.length,
                                itemBuilder: (ctx, i) => ListTile(
                                  leading: CircleAvatar(
                                    backgroundImage: FileImage(
                                      greatPlaces.items[i].image,
                                    ),
                                  ),
                                  title: Text(greatPlaces.items[i].title),
                                  subtitle: Text(
                                      greatPlaces.items[i].location.address),
                                  onTap: () {
                                    Navigator.of(context).pushNamed(
                                      PlaceDetailScreen.routeName,
                                      arguments: greatPlaces.items[i].id,
                                    );
                                  },
                                ),
                              ),
                  );
          }),
      floatingActionButton: ValueListenableBuilder(
          valueListenable: _isWaiting,
          builder: (BuildContext context, bool value, Widget child) {
            return Visibility(
                visible: !value,
                child: FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.add),
                ));
          }),
    );
  }
}

【讨论】：