第一个Flutter demo(一)
参照flutter官网,实现第一个Flutter应用。第一部分:实现无限循环列表
第一部分功能介绍:
从零开始创建了一个 Flutter 应用;
- 编写 Dart 代码;
- 使用外部的第三方库(package);
- 在开发过程中试用了热重载 (hot reload);
- 实现了一个有状态的 widget;
- 创建了一个懒加载的,无限滚动的列表。
效果图:
全部代码都在main.dart中,
main.dart 代码如下:
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: RandomWords(),
);
}
}
// #docregion RandomWordsState, RWS-class-only
class RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _biggerFont = const TextStyle(fontSize: 18.0);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Startup Name Generator'),
),
body: _buildSuggestions(),
);
}
/*构造器:此方法构建显示建议单词对的 ListView*/
Widget _buildSuggestions() {
return ListView.builder(
padding: const EdgeInsets.all(16.0),
itemBuilder: (context, i) {
/*1 偶数行会执行_buildRow添加单词;奇数行会添加分割线*/
if (i.isOdd) {
return Divider();
}
/*2*/
final index = i ~/ 2; /*3*/
if (index >= _suggestions.length) {
_suggestions.addAll(generateWordPairs().take(10)); /*4*/
}
return _buildRow(_suggestions[index]);
});
}
/*每行listview样式*/
Widget _buildRow(WordPair pair) {
return ListTile(
title: Text(
pair.asPascalCase,
style: _biggerFont,
),
);
}
}
// #docregion RandomWords
class RandomWords extends StatefulWidget {
@override
RandomWordsState createState() => RandomWordsState();
}
完整工程下载链接:
点击下载