是否有任何内置的方式在Flutter中隐藏FloatingActionButton
在ListView
向下滚动然后向上滚动显示它?
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
ScrollController _hideButtonController;
void _incrementCounter() {
setState(() {
_counter++;
});
}
var _isVisible;
@override
initState(){
super.initState();
_isVisible = true;
_hideButtonController = new ScrollController();
_hideButtonController.addListener((){
if(_hideButtonController.position.userScrollDirection == ScrollDirection.reverse){
if(_isVisible == true) {
/* only set when the previous state is false
* Less widget rebuilds
*/
print("**** ${_isVisible} up"); //Move IO away from setState
setState((){
_isVisible = false;
});
}
} else {
if(_hideButtonController.position.userScrollDirection == ScrollDirection.forward){
if(_isVisible == false) {
/* only set when the previous state is false
* Less widget rebuilds
*/
print("**** ${_isVisible} down"); //Move IO away from setState
setState((){
_isVisible = true;
});
}
}
}});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new CustomScrollView(
controller: _hideButtonController,
shrinkWrap: true,
slivers: <Widget>[
new SliverPadding(
padding: const EdgeInsets.all(20.0),
sliver: new SliverList(
delegate: new SliverChildListDelegate(
<Widget>[
const Text('I\'m dedicating every day to you'),
const Text('Domestic life was never quite my style'),
const Text('When you smile, you knock me out, I fall apart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('And I thought I was so smart'),
const Text('I realize I am crazy'),
],
),
),
),
],
)
),
floatingActionButton: new Visibility(
visible: _isVisible,
child: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
),
);
}
}
如果我没有使用listview,我很抱歉,因为我不知道如何使用listview滚动。我会回答你问题的其他部分。
首先,你需要创建一个scrollcontroller来听scrollPostion事件
如果scrollcontroller设法找到scrolldirection正向或反向。您添加一个将状态设置为可见的状态。
绘制按钮时,将按钮包装在visibility类中。您设置可见标志,小部件应忽略输入命令。
编辑:我似乎无法添加到ScrollController,ScrollerPosition,ScrollDirection和Opacity的链接。我猜你可以自己搜索,也可以在链接中编辑
Edit2:使用CopsonRoad或使用可见性小部件,除非您想要布局树中未上漆的小部件
编辑3:鉴于新手使用代码,我会更新代码以鼓励更好的实践。使用可见性而不是不透明度。从setState中删除io。在Flutter 1.5.4-hotfix.2上测试
处理它的方法有很多种。我在这里列举一些。
Visibility
来隐藏/显示FAB。
floatingActionButton: Visibility(
child: FloatingActionButton(...),
visible: false, // set it to false
)
if
条件:
floatingActionButton: Column(
children: <Widget>[
if (shouldShow) FloatingActionButton(...), // visible if showShould is true
],
)
Opacity
小部件。
floatingActionButton: Opacity(
opacity: shouldShow ? 1 : 0, // visible if showShould is true
child: FloatingActionButton(...),
)
您可以使用Visibility
小部件来处理子小部件的可见性
样品:
floatingActionButton:
Visibility(visible: _visibilityFlag , child: _buildFAB(context)),