flutter底部彈出BottomSheet詳解

更新時間：2022年03月23日 12:39:33 作者：Guancya

這篇文章主要為大家詳細介紹了flutter底部彈出BottomSheet，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了flutter底部彈出效果的具體代碼，供大家參考，具體內容如下

項目中遇到多種條件篩選的情況，我使用了flutter官方的BottomSheet組件來解決了我的問題。先看一下效果圖：

ModalBottomSheet

這個ModalBottomSheet就是類似一個Dialog，有一個半透明的背景層，然后上面顯示你自定義的內容。用法非常簡單，F(xiàn)lutter提供了一個showModalBottomSheet的方法彈出一個BottomSheet。

實現(xiàn)代碼：

class AddExpense extends StatefulWidget {
? @override
? State<StatefulWidget> createState() => _AddExpensePage();
}

class _AddExpensePage extends State<AddExpense> {
? List<Search> typeList = List<Search>();
? Search _search;
? bool _typeCheck = false;


? @override
? void initState() {
? ? // TODO: implement initState
? ? super.initState();
? ? _loadType();
? }

? @override
? Widget build(BuildContext context) {
? ? // TODO: implement build
? ? return ?Column(
? ? ? children: <Widget>[
? ? ? ? Card(
? ? ? ? ? child: Row(
? ? ? ? ? ? children: <Widget>[
? ? ? ? ? ? ? SizedBox(
? ? ? ? ? ? ? ? width: 16.0,
? ? ? ? ? ? ? ),
? ? ? ? ? ? ? Text('報銷類型：', style: TextStyle(fontSize: 16)),
? ? ? ? ? ? ? Expanded(
? ? ? ? ? ? ? ? child: ListTile(
? ? ? ? ? ? ? ? ? title: Text(
? ? ? ? ? ? ? ? ? ? _search.code ?? "報銷類型",
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? trailing: _typeCheck
? ? ? ? ? ? ? ? ? ? ? ? Icon(Icons.keyboard_arrow_up)
? ? ? ? ? ? ? ? ? ? ? : Icon(Icons.keyboard_arrow_down),
? ? ? ? ? ? ? ? ? onTap: () {
? ? ? ? ? ? ? ? ? ? setState(() {
? ? ? ? ? ? ? ? ? ? ? _typeCheck = !_typeCheck;
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? showModalBottomSheet(
? ? ? ? ? ? ? ? ? ? ? context: context,
? ? ? ? ? ? ? ? ? ? ? builder: (BuildContext context) {
? ? ? ? ? ? ? ? ? ? ? ? return ListView.separated(
? ? ? ? ? ? ? ? ? ? ? ? ? itemCount: typeList.length,
? ? ? ? ? ? ? ? ? ? ? ? ? separatorBuilder: (context, index) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? return Divider();
? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? itemBuilder: (context, index) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? return ListTile(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title: Text(typeList[index].code),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? trailing: Offstage(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? offstage:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? typeList[index].check ? false : true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? child: Icon(Icons.check),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? onTap: () {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for (int i = 0; i < typeList.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? i != index
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? typeList[i].check = false
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? : typeList[i].check = true;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _search = typeList[index];
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Navigator.pop(context);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ).then((val) {
? ? ? ? ? ? ? ? ? ? ? setState(() {
? ? ? ? ? ? ? ? ? ? ? ? _typeCheck = !_typeCheck;
? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? )
? ? ? ? ? ? ],
? ? ? ? ? ),
? ? ? ? ),
? ? ? ],
? ? );
? ?
? }


? void _loadType() {
? ? String jsonData =
? ? ? ? '[{"code":"差旅費報銷單","check":true},{"code":"一般費用報銷單","check":false},{"code":"因公臨時出國(境)支出表","check":false},{"code":"藥費報銷單","check":false},{"code":"合同付款審批表","check":false},{"code":"工資系統(tǒng)專用報銷表","check":false}]';
? ? List<dynamic> list = json.decode(jsonData);
? ? list.forEach((element) {
? ? ? Search search = Search.fromJson(element);
? ? ? if (search.check) {
? ? ? ? setState(() {
? ? ? ? ? _search = search;
? ? ? ? });
? ? ? }
? ? ? typeList.add(search);
? ? });

? }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: