本篇內(nèi)容介紹了“怎么使用flutter中Checkbox復(fù)選框的全選與刪除”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，小程序制作，軟件按需定制等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
1.這里主要用到AppBar、Stack、Offstage、Listview等組件
邏輯是這樣的：點擊右上角編輯，調(diào)出每條內(nèi)容左側(cè)的復(fù)選框，和底部的操作樣式。
然后可以全選，取消，單選，刪除，再次點擊編輯后隱藏復(fù)選框樣式
主要功能分為以下四個模塊，頂部導(dǎo)航欄也就是appbar組件、疊加stack組件、顯示隱藏offstage組件、列表listview組件
2.我們先初始化一下數(shù)據(jù)，設(shè)置頂部信息欄的顯示效果
appbar的右側(cè)設(shè)置一個編輯按鈕，增加點擊事件，重置選中的ID和復(fù)選框樣式
appbar的相關(guān)功能可以參考初識頂部導(dǎo)航欄【flutter20個實例之一】
重慶分公司
重慶分公司
AppBar(
title: Text('我的收藏'),
actions: [
IconButton(
icon: Icon(Icons.edit),
tooltip: "編輯",
onPressed: () {
_list.forEach((f) {
f['select'] = false;//列表設(shè)置為未選中
});
this.deleteIds = [];//重置選中的ID數(shù)組
setState(() {
this._isOff = !this._isOff;//隱藏顯示總開關(guān)
this._list = _list;
});
},
),
],
) 3.listview設(shè)置一個可以滾動的列表
當我們點擊右上角的編輯時，調(diào)出底部的全選和刪除操作，但是這個底部樣式不隨著列表一起滾動
所以我們需要用疊加組件stack將兩部分功能包含在一起，同時底部的樣式要固定在底部
列表的內(nèi)容樣式可以擴散開發(fā)，目前我用顏色條代替
if (_list.isEmpty) {
return Center(child: Text('暫無收藏'));
} else {
return Container(
padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
child: Stack(
alignment: Alignment.bottomCenter,
children: [
getItemContent(),//這里是列表的內(nèi)容
getItemBottom(),//這里是底部刪除全選操作的內(nèi)容
],
),
);
} 4.底部全選和刪除的樣式
底部有顯示隱藏的邏輯，所以用offstage組件包裹，初始化屬性為：
offstage: _isOff
默認是隱藏的，點擊右上角編輯icon后，_isOff設(shè)置為true
同時全選框增加點擊事件：
如果為true，遍歷_list數(shù)組，select設(shè)置為true，將數(shù)據(jù)ID依次加入deleteIds數(shù)組
如果為false，遍歷_list數(shù)組，select設(shè)置為false，將清空deleteIds數(shù)組
//底部操作
Widget getItemBottom() {
return Offstage(
offstage: _isOff,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 0, 16, 0),
child: Container(
height: 40,
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Checkbox(
value: _checkValue,
onChanged: (value) {
this.deleteIds = [];
_list.forEach((f) {
f['select'] = value;
if (value == true) {
this.deleteIds.add(f['id']);
}
});
setState(() {
_checkValue = value;
_list = _list;
});
},
),
Text('全選'),
],
),
InkWell(
child: Text('刪除'),
onTap: () {},
),
],
)),
),
);
} 5.中間的內(nèi)容，左側(cè)放我們的復(fù)選框，右側(cè)是列表數(shù)據(jù)
注意的是：內(nèi)容里面的復(fù)選框padding，要和底部操作條的padding設(shè)置一致，看起來是對齊的
內(nèi)容列表中的復(fù)選框點擊的時候：
如果狀態(tài)為true，判斷deleteIds數(shù)組里是否已經(jīng)存在本ID，如果沒有則進行新增
如果狀態(tài)為false，刪除deleteIds數(shù)組里本數(shù)據(jù)ID
//底部操作樣式
Widget getItemBottom() {
return Offstage(
offstage: _isOff,
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 0, 8, 0),
child: Container(
height: 40,
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Checkbox(
value: _checkValue,
onChanged: (value) {
selectAll(value);
},
),
Text('全選'),
],
),
InkWell(
child: Text('刪除'),
onTap: () {},
),
],
)),
),
);
} 6.整體的主要結(jié)構(gòu)
import 'package:flutter/material.dart';
class Mytest extends StatefulWidget {
@override
_MytestState createState() => _MytestState();
}
class _MytestState extends State {
List “怎么使用flutter中Checkbox復(fù)選框的全選與刪除”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
