flutter 滑動控制項詳解

flutter 滑動控制項詳解

flutter中實現滑動的控制項有三個分別是 listview、gridview、customscrollview

三個的關係

即 listview、gridview、customscrollview都是基於scrollview開發的。

listview 共有4個建構函式 listview()、listview.builder()、listview.separated()、listview.custom()

預設建構函式方式（主要用來顯示固定數量的item）

/// 預設建構函式方式，用來顯示固定數量item

listview(
padding: const edgeinsets.all(8),
children: [
container(
height: 50,
color: colors.amber[600],
child: const center(child: text('entry a')),
),container(
height: 50,
color: colors.amber[500],
child: const center(child: text('entry b')),
),container(
height: 50,
color: colors.amber[100],
child: const center(child: text('entry c')),
),],
)

builder方式（可以用來顯示無限個item，可以一直滑動直到item的最後乙個）

final listentries = ['a', 'b', 'c'];

final listcolorcodes = [600, 500, 100];
listview.builder(
padding: const edgeinsets.all(8),
itemcount: entries.length,
itembuilder: (buildcontext context, int index) ')),);}
);

separated方式（和builder方式特性是一樣的，只不過可以通過listview直接給item之間設定分割線）

final listentries = ['a', 'b', 'c'];

final listcolorcodes = [600, 500, 100];
listview.separated(
padding: const edgeinsets.all(8),
itemcount: entries.length,
itembuilder: (buildcontext context, int index) ')),
);},
separatorbuilder: (buildcontext context, int index) => const divider(),
);

custom 方式（需要實現childrendelegate和childcount方法），通過sliverchildbuilderdelegate來建立item，通過childcount來設定item的個數

listview.custom(

childrendelegate: sliverchildbuilderdelegate(
(buildcontext context, int index) ,
childcount: items.length,
findchildindexcallback: (key key) ),
),

Flutter控制項 Container

container 乙個方便的 widget，它組合了常見的繪畫 定位和大小的 widget，在flutter中非常常見。顏色，邊框，填充形狀，陰影，漸變色，背景。container 首先會使用 padding 來圍繞在 child 周圍 也包括 decoration 中存在的邊框 新增額外的約束限...

flutter之Align控制項

align控制項即對齊控制項，能將子控制項所指定方式對齊，並根據子控制項的大小調整自己的大小。對齊子控制項的方式 bottomcenter 0.5,1.0 底部中心 bottomleft 0.0,1.0 左下角 bottomright 1.0,1.0 右下角 center 0.5,0.5 水平垂直居...

flutter控制項之CheckBox

import package flutter material.dart class learncheckbox extends statefulwidget class learncheckbox extends state newcenter child newcheckboxlisttile ...