Question

我是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),
          ),      
  

  );
  
  }
}

Answer 1

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

Answer 2

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

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

3 个答案: