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)解決了我的問題。先看一下效果圖：
ModalBottomSheet
這個(gè)ModalBottomSheet就是類似一個(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)銷類型：', style: TextStyle(fontSize: 16)),
? ? ? ? ? ? ? Expanded(
? ? ? ? ? ? ? ? child: ListTile(
? ? ? ? ? ? ? ? ? title: Text(
? ? ? ? ? ? ? ? ? ? _search.code ?? "報(bào)銷類型",
? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? 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)銷單","check":true},{"code":"一般費(fèi)用報(bào)銷單","check":false},{"code":"因公臨時(shí)出國(guó)(境)支出表","check":false},{"code":"藥費(fèi)報(bào)銷單","check":false},{"code":"合同付款審批表","check":false},{"code":"工資系統(tǒng)專用報(bà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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android自定義倒計(jì)時(shí)按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
Android代碼檢查規(guī)則Lint的自定義與應(yīng)用詳解
本文主要介紹了Android代碼檢查規(guī)則Lint的自定義與應(yīng)用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Android編程中TextView寬度過(guò)大導(dǎo)致Drawable無(wú)法居中問題解決方法
這篇文章主要介紹了Android編程中TextView寬度過(guò)大導(dǎo)致Drawable無(wú)法居中問題解決方法,以實(shí)例形式較為詳細(xì)的分析了TextView設(shè)置及xml布局與調(diào)用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
在android開發(fā)中ListView是比較常用的組件，它以列表的形式展示具體內(nèi)容，并且能夠根據(jù)數(shù)據(jù)的長(zhǎng)度自適應(yīng)顯示。抽空把對(duì)ListView的使用做了整理，需要的朋友可以參考下2012-11-11
探究Android客戶端網(wǎng)絡(luò)預(yù)連接優(yōu)化機(jī)制
一般情況下，我們都是用一些封裝好的網(wǎng)絡(luò)框架去請(qǐng)求網(wǎng)絡(luò)，對(duì)底層實(shí)現(xiàn)不甚關(guān)注，而大部分情況下也不需要特別關(guān)注處理。了解底層的一些實(shí)現(xiàn)，有益于我們對(duì)網(wǎng)絡(luò)加載進(jìn)行優(yōu)化。本文就是關(guān)于根據(jù)http的連接復(fù)用機(jī)制來(lái)優(yōu)化網(wǎng)絡(luò)加載速度的原理與細(xì)節(jié)2021-06-06
這篇文章主要介紹了Android編程畫圖之抗鋸齒解決方法,分析了兩種抗鋸齒的實(shí)現(xiàn)方法,并給出了實(shí)例代碼進(jìn)行總結(jié),需要的朋友可以參考下2016-01-01
這篇文章主要為大家介紹了Google大佬都用的廣播?goAsync源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Android?flutter?Dio鎖的巧妙實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了Android?flutter?Dio鎖的巧妙實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
Android使用fastjson庫(kù)解析json字符串實(shí)戰(zhàn)
fastjson是一個(gè)Java語(yǔ)言編寫的高性能功能完善的JSON庫(kù),它采用一種“假定有序快速匹配”的算法,把JSON?Parse的性能提升到極致,是目前Java語(yǔ)言中最快的JSON庫(kù),Fastjson接口簡(jiǎn)單易用,已經(jīng)被廣泛使用在緩存序列化、協(xié)議交互、Web輸出、Android客戶端等多種應(yīng)用場(chǎng)景2023-11-11
Android自定義PasswordInputView密碼輸入
這篇文章主要為大家詳細(xì)介紹了Android自定義PasswordInputView密碼輸入功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08