Flutter常用Widget详解（三）

最新推荐文章于 2023-05-11 09:30:28 发布

Flutter编程指南

最新推荐文章于 2023-05-11 09:30:28 发布

阅读量1.9k

点赞数 1

分类专栏： Flutter 文章标签： Flutter Widget APP 跨平台技术应用开发

本文链接：https://blog.csdn.net/weixin_43499085/article/details/88842375

版权

本文详细介绍了Flutter中的ListView和GridView两种列表和网格视图的创建方法，包括ListView()和ListView.builder()，以及GridView.count()和GridView.builder()。此外，还讲解了Container、Padding、Center、Align等布局Widget的使用，帮助开发者更好地进行应用开发。

摘要由CSDN通过智能技术生成

文章目录

前言

前面两篇文章给大家介绍了Widget中对应原生开发中的一些常用基础控件，Text、TextField、Button、Dialog、Picker等，本篇我们将和大家一起学习ListView、GridView等列表网格布局控件和其他常用的用于布局的Widget，如Container、Row、Column、Padding等等。

列表和网格视图Widget

ListView

ListView通常有两种用法：第一种实现类似于安卓中ScrollView和iOS中UIScrollView；第二种实现类似于安卓中的ListView和iOS中的UITableView。

通过ListView()创建

直接通过ListView()创建，主要属性介绍如下：

scrollDirection

表示控件滚动的方向，主要有两个值可设置。Axis.vertical表示垂直滚动视图；Axis.horizontal表示水平滚动视图。
reverse

表示读取内容的方向是否颠倒，可设置值为true|false。false表示由左向右或由上向下读取；true表示由右向左或由下向上读取。
primary

可设置值为true|false。true时表示内容不足够填充控件区间时也可以有滚动反馈；false表示只有内容超出控件大小时才可滚动。
physics

表示物理反馈，一般设置值为AlwaysScrollableScrollPhysics()|ScrollPhysics()。AlwaysScrollableScrollPhysics表示总是有滚动反馈，无论primary值为true or false；ScrollPhysics表示只有只有内容超出控件大小时才会有滚动反馈，无论primary值为true or false。
padding

表示控件的内边距。
controller

表示用于控制视图滚动位置的控制器对象，设置此属性时primary属性值必须为false，否则报错，可通过scrollController.jumpTo(0.0)让滚动视图回到最顶端或最左位置。
itemExtent

表示单个条目的范围，即指item的高度（scrollDirection为Axis.vertical时）或宽度（scrollDirection为Axis.horizontal时）。
children

表示列表包含的widget集合，整个滚动视图中的内容设置。

var scrollController = ScrollController();

Widget getListView() {
   
   return ListView(
     scrollDirection: Axis.vertical, 
     reverse: false, 
     primary: false, 
     physics: const AlwaysScrollableScrollPhysics(), 
     padding: EdgeInsets.all(25),
     controller: scrollController, 
     itemExtent: 50, 
     children: <Widget>[
       const Text('I\'m dedicating every day to you'),
       const Text('Domestic life was never quite my style'),
       const Text('When you smile, you knock me out, I fall apart'),
       const Text('And I thought I was so smart'),
       const Text('I\'m dedicating every day to you'),
       const Text('I\'m dedicating every day to you'),
       const Text('Domestic life was never quite my style'),
       const Text(