快捷導(dǎo)航

flutter底部彈出BottomSheet詳解

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

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

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

項(xiàng)目中遇到多種條件篩選的情況，我使用了flutter官方的BottomSheet組件來(lái)解決了我的問(wèn)題。先看一下效果圖：

ModalBottomSheet

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

實(shí)現(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('報(bào)銷(xiāo)類(lèi)型：', style: TextStyle(fontSize: 16)),
? ? ? ? ? ? ? Expanded(
? ? ? ? ? ? ? ? child: ListTile(
? ? ? ? ? ? ? ? ? title: Text(
? ? ? ? ? ? ? ? ? ? _search.code ?? "報(bào)銷(xiāo)類(lèi)型",
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? 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":"差旅費(fèi)報(bào)銷(xiāo)單","check":true},{"code":"一般費(fèi)用報(bào)銷(xiāo)單","check":false},{"code":"因公臨時(shí)出國(guó)(境)支出表","check":false},{"code":"藥費(fèi)報(bào)銷(xiāo)單","check":false},{"code":"合同付款審批表","check":false},{"code":"工資系統(tǒng)專(zhuān)用報(bào)銷(xiāo)表","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);
? ? });

? }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: