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

问题描述

我是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!'),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),);
  
  }
}

解决方法

使您的班级成为 StatefulWidget ，而不是 StatelessWidget 。这将有助于实现“浮动操作按钮”的可见性。并尝试在构建方法中处理setstate（）{}，该方法会在状态变化时不断调用。

,

您可以尝试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!'),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),));
          }),);
  }
}

,

1