Flutter Bottom Sheet是一个常用的用户界面组件,用于在应用程序底部显示一个可交互的工作表。当用户与工作表进行交互时,有时需要根据交互行为动态更改工作表的高度。
要在用户与工作表交互时更改高度,可以使用setState
方法来更新工作表的高度。以下是一个示例代码:
import 'package:flutter/material.dart';
class MyBottomSheet extends StatefulWidget {
@override
_MyBottomSheetState createState() => _MyBottomSheetState();
}
class _MyBottomSheetState extends State<MyBottomSheet> {
double _sheetHeight = 200.0; // 初始高度为200
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Bottom Sheet'),
),
body: Center(
child: RaisedButton(
child: Text('打开工作表'),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Container(
height: _sheetHeight,
child: Column(
children: [
Text('工作表内容'),
RaisedButton(
child: Text('增加高度'),
onPressed: () {
setState(() {
_sheetHeight += 50.0;
});
},
),
RaisedButton(
child: Text('减少高度'),
onPressed: () {
setState(() {
_sheetHeight -= 50.0;
});
},
),
],
),
);
},
);
},
);
},
),
),
);
}
}
void main() {
runApp(MaterialApp(
home: MyBottomSheet(),
));
}
在上述示例中,我们使用showModalBottomSheet
方法打开一个工作表。工作表的高度由变量_sheetHeight
控制,初始高度为200。通过StatefulBuilder
包裹工作表的内容,可以在工作表内部使用setState
方法来更新工作表的高度。示例中的两个按钮分别增加和减少工作表的高度。
这是一个简单的示例,你可以根据实际需求进行更复杂的交互和高度变化操作。
领取专属 10元无门槛券
手把手带您无忧上云