[英]How to hide Floating Action Button in 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!'),
),
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),
),
);
}
}
使您的类成为StatefulWidget而不是StatelessWidget 。 这将有助于实现浮动操作按钮的可见性。 并尝试在 build 方法中处理 setstate(){} ,该方法在状态变化时不断调用。
你可以试试 ValueNotifier, https: //api.flutter.dev/flutter/foundation/ValueNotifier-class.html
包含单个值的 ChangeNotifier。
当 value 被替换为不等于由相等运算符 == 评估的旧值时,此类通知其侦听器。
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),
));
}),
);
}
}
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),
)),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.