我正在尝试克隆股票 android 计算器应用程序。我无法弄清楚如何实现在右侧打开的可拉式抽屉。
这是一个gif,显示了我在说什么:
https://imgur.com/a/hnYLTyA
最佳答案
Stack
将抽屉放在计算器屏幕的顶部。Positioned
用于抽屉并设置其 left
参数根据它的拉动量。left
抽屉的参数最初到屏幕的末尾。GestureDetector
和 onPanUpdate
拉动时改变位置。ModalBarrier
.用 Opacity
包裹它小部件并设置其 opacity
参数根据抽屉拉出的数量。 static double _offset = 30;
double _drawerLeft = 400;
IconData _drawerIcon = Icons.arrow_back_ios;
bool _init = true;
@override
Widget build(BuildContext context) {
if (_init) {
_drawerLeft = MediaQuery.of(context).size.width - _offset;
_init = false;
}
return Scaffold(
body: Align(
alignment: Alignment.bottomCenter,
child: FractionallySizedBox(
widthFactor: 1,
heightFactor: 0.5,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Positioned.fill(
child: Container(
color: Colors.grey[200],
child: Center(
child: Text(
'text',
style: TextStyle(fontSize: 32),
)),
),
),
Positioned.fill(
right: 0,
child: Opacity(
opacity: 1 -
_drawerLeft /
(MediaQuery.of(context).size.width - _offset),
child:
ModalBarrier(dismissible: false, color: Colors.black87),
),
),
Positioned(
width: MediaQuery.of(context).size.width * 3 / 4,
top: 0,
height: MediaQuery.of(context).size.height / 2,
left: _drawerLeft,
child: GestureDetector(
onPanUpdate: (details) {
_drawerLeft += details.delta.dx;
if (_drawerLeft <= MediaQuery.of(context).size.width / 4)
_drawerLeft = MediaQuery.of(context).size.width / 4;
if (_drawerLeft >=
MediaQuery.of(context).size.width - _offset)
_drawerLeft =
MediaQuery.of(context).size.width - _offset;
if (_drawerLeft <= MediaQuery.of(context).size.width / 3)
_drawerIcon = Icons.arrow_forward_ios;
if (_drawerLeft >=
MediaQuery.of(context).size.width - 2 * _offset)
_drawerIcon = Icons.arrow_back_ios;
setState(() {});
},
child: Container(
decoration: BoxDecoration(color: Colors.blue),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.only(right: _offset),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
_drawerIcon,
color: Colors.white,
),
],
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'text',
style: TextStyle(
color: Colors.white, fontSize: 32),
)
],
)
],
),
)),
),
],
),
),
),
);
}
结果:关于flutter - 如何创建从侧面打开的模态底板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63647747/