码个蛋(codeegg)第 603 次推文
前言
Flutter系列文章:
《Flutter 入门指北(Part 3)之 Appbar,Scaffold 填坑》
《Flutter 入门指北(Part 5)之输入处理及实战》
前面的小节基本上讲完了常用的部件和容器部件,也可以完成很多的界面,但是又一个问题,假如我们要显示一段文字,比如将 一段又臭又长的文字 在界面上显示 1000 次,不难完成吧
// ..省略一些无关代码
body: Text('一段又臭又长的文字' * 1000, softWrap: true)
很简单,运行到手机...「诶诶诶,**,怎么只显示了一部分,剩下的怎么画不下去」
日常开发中,会遇到很多这种情况,许多界面不是一页就能够显示完的。那么这里提下可滑动的容器部件
SingleChildScrollView
这个部件非常简单,不贴源码了。最简单的使用方式只需要提供一个 child 即可。现在给前面写的 Text 包裹上一层 SingleChildScrollView 然后再运行,文字全部都展示出来了。
如果需要实现一个垂直的滚动列表,可以直接通过 SingleChildScrollView 包裹 Column 来实现,列表内容全部塞到 Column 即可
class SingleChildScrollDemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
/// letters 自由发挥吧...一定要大量,大量,大量
List<String> letters = [......];
return Scaffold(
appBar: AppBar(
title: Text('Single Child Demo'),
),
body: SingleChildScrollView(
child: Center(
child: Column(
children: List.generate(
letters.length,
(index) => Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0),
child: Text(letters[index], style: TextStyle(fontSize: 18.0)),
)),
),
)),
);
}
}
运行结果会根据你的 letters 不同而不同,这边就不贴效果图了,反正你可以看到一串列表...
那么如果需要实现横向滚动列表呢,稍稍做下修改就行了
body: SingleChildScrollView(
// 设置滚动方向
scrollDirection: Axis.horizontal,
child: Center(
// 修改为 `Row` 即可
child: Row(
children: List.generate(
letters.length,
// 如果你的 letters 数量比较少,推荐加个 `Container` 把宽度指定大点
(index) => Container(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 6.0),
child: Text(letters[index], style: TextStyle(fontSize: 18.0)),
),
width: 30.0)),
),
))
效果图也不贴了,都比较简单。
该部分代码查看 single_child_scroll_main.dart 文件*
ListView
平时开发 Android 的时候,如果有相同格式的列表要实现,一般会使用 ListView 或者 RecyclerView 来实现,Flutter 也提供了类似的部件 ListView
实现 ListView 的方法主要有
通过 ListView 设置 children 属性实现