Listview()

前端頁面常見的一個以列表方式顯示內容的組件。可垂直或水平滾動的列表。

屬性	說明
scrollDirection	設置滾動的方向，取值包括horizontal、vertical
reverse	設置是否翻轉，默認值false
itemExtent	設置滾動方向子元素的長度，垂直方向為高度；水平方向即為寬度
padding	設置內邊距

class MyState extends State {@overrideWidget build(BuildContext context) {Random random = Random();List<Widget> list = [];for (int i = 0; i < 100; i++) {int r = random.nextInt(255);int g = random.nextInt(255);int b = random.nextInt(255);Container container = Container(alignment: Alignment.center,child: Text(i.toString()),color: Color.fromARGB(255, r, g, b),padding: EdgeInsets.fromLTRB(0, 20, 0, 20),);list.add(container);}ListView listView = ListView(children: list);return Scaffold(appBar: AppBar(title: Text(""), centerTitle: true),body: listView,);}
}

Listview.builder

一般用于來源于網絡的數據。數據量大、數據條數不可預見的情況。
itemCount顯示的數據條數。

ListView.builder(itemCount: nums,itemBuilder: (context, index) {return list[index];},);

點擊添加按鈕每次多顯示10條數據。

class MyState extends State {int nums = 10;@overrideWidget build(BuildContext context) {Random random = Random();List<Widget> list = [];for (int i = 0; i < 100; i++) {int r = random.nextInt(255);int g = random.nextInt(255);int b = random.nextInt(255);Container container = Container(alignment: Alignment.center,child: Text(i.toString()),color: Color.fromARGB(255, r, g, b),padding: EdgeInsets.fromLTRB(0, 20, 0, 20),);list.add(container);}ListView listView2 = ListView.builder(itemCount: nums,itemBuilder: (context, index) {return list[index];},);return Scaffold(appBar: AppBar(title: Text(""), centerTitle: true),body: listView2,floatingActionButton: FloatingActionButton(onPressed: () {setState(() {nums = nums + 10;});},child: Text("添加"),),);}
}

Listview.separated

用于在列表項之間的分割線。

class MyState extends State {@overrideWidget build(BuildContext context) {Random random = Random();List<Widget> list = [];for (int i = 0; i < 100; i++) {int r = random.nextInt(255);int g = random.nextInt(255);int b = random.nextInt(255);Container container = Container(alignment: Alignment.center,child: Text(i.toString()),color: Color.fromARGB(255, r, g, b),padding: EdgeInsets.fromLTRB(0, 20, 0, 20),);list.add(container);}ListView listView3 = ListView.separated(itemBuilder: (context, index) {return list[index];},separatorBuilder: (context, index) {return Container(width: MediaQuery.of(context).size.width,height: 5,color: Colors.white,);},itemCount: list.length,);return Scaffold(appBar: AppBar(title: Text(""), centerTitle: true),body: listView3,);}
}