FlutterListView以及GridView的列表展⽰与Item点击事件本⽂章为作者在学习Flutter 时的学习总结，在本⽂中你可了解到以下内容：
Flutter的安装与项⽬创建
Flutter中ListView的使⽤
Flutter中GridView的使⽤
Flutter中Text控件的使⽤
Flutter中Image控件的使⽤
Flutter中控件的点击事件
Flutter中Dialog的展⽰
1. Flutter的安装与使⽤
能查看本⽂，相信你对Flutter 已经有了⼀定的了解，在此就不⽤对Flutter 进⾏介绍了。如果完全不了解可以查看：
1.1 Flutter的安装
虽然已有详细的安装介绍与使⽤教程了，但我还是对在 Windows Android Studio中的使⽤作⼀下简单介绍。
1.1.1 获取Flutter SDK
1.1.2 配置环境变量
将下载好的SDK zip⽂件解压后，点击 “控制⾯板>⽤户帐户>⽤户帐户>更改我的环境变量” 将Flutter SDK bin⽂件所在路径
如H:\flutter\bin 添加进Path环境变量中。
DOS命令⾏中输⼊以下命令可判断是否成功并查看flutter的命令⽤法。
flutter
1
1.1.3 Android Studio的配置
1.2 Flutter App的创建
在Android Studio 中点击 “File>New>New Flutter Project” 选择 Flutter Application 然后 下⼀步。如果环境变量配置成功，在Flutter SDK path 那⼀栏会⾃动选中本地Flutter所在的位置。
创建成功后，可以看到lib ⽂件下的main.dart ⽂件，在Flutter项⽬中，代码都在lib⽂件夹下。然后可选择设备运⾏程序。在选择系统设备时，在macOS中如有IOS模拟器，Android Studio依然⽀持打开IOS模拟器。
2. Flutter中的ListView
展⽰列表的代码
将 lib/main.dart⽂件中的代码改为如下代码，运⾏即可。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(title: new Text("Flutter App")),
body: new HomePage(),
),
);
}
}
//主页要展⽰的内容
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new ListState();
}
//得到⼀个ListView
class ListState extends State {
@override
Widget build(BuildContext context) {
return new ListView.builder(itemCount: 40, itemBuilder: buildItem);
}
//ListView的Item
Widget buildItem(BuildContext context, int index) {
return new Text("xhu_ww");
}
}
涉及的知识点：
上述代码的实现⽅式：runApp > StatelessWidget > StatefulWidget > State 也可以是这种⽅式：runApp > StatefulWidget > State 代码如下：
//主页要展⽰的内容
class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() => new ListState();
}
//得到⼀个ListView
class ListState extends State {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(title: new Text("Flutter App")),
body: new ListView.builder(itemCount: 40, itemBuilder: buildItem)),    );
}
//ListView的Item
Widget buildItem(BuildContext context, int index) => new Text("xhu_ww"); }
ListView Item 的其他设置：
//ListView的Item
Widget buildItem(BuildContext context, int index) {
//设置分割线
if (index.isOdd) return new Divider();
//设置字体样式
TextStyle textStyle =
new TextStyle(fontWeight: FontWeight.bold, fontSize: 14.0);
//设置Padding
return new Padding(
padding: const EdgeInsets.all(8.0),
child: new Text("xhu_ww", style: textStyle));
}
最终效果如下：
3. Flutter中的GridView
unt(
primary: false,
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
flutter开发appcrossAxisCount: 2,
children: <Widget>[
const Text('He\'d have you all unravel at the'),    const Text('Heed not the rabble'),
const Text('Sound of screams but the'),
const Text('Who scream'),
const Text('Revolution '),
const Text('Revolution, '),
],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
发现需要⼀个 Widget 的集合
然后得到 Image 控件的集合：
String url =
"ss3.bdstatic/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=495625508,"      "3408544765&fm=27&gp=0.jpg";
Widget getItemWidget() {
//BoxFit 可设置展⽰图⽚时的填充⽅式
return new Image(image: new NetworkImage(url), fit: ver);
}
List<Widget> _buildGridTileList(int number) {
List<Widget> widgetList = new List();
for (int i = 0; i < number; i++) {
widgetList.add(getItemWidget());
}
return widgetList;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。