flutter Listview使用教程,点击事件,ListView顶部留有空白(第一行大小不一样)解决办法
flutter Listview使用教程,点击事件,ListView顶部留有空白(第一行大小不一样)解决办法。直接copy下面的代码自己跑一下就知道了。基础代码在这里:https://codelabs.flutter-io.cn/codelabs/first-flutter-app-pt1-cn/index.html#5上面的基础代码存在问题,顶部(第一行大小不一样) ,解决办法为:return
·
flutter Listview使用教程,点击事件,ListView顶部留有空白(第一行大小不一样)解决办法。直接copy下面的代码自己跑一下就知道了。基础代码在这里:https://codelabs.flutter-io.cn/codelabs/first-flutter-app-pt1-cn/index.html#5
上面的基础代码存在问题,顶部(第一行大小不一样) ,解决办法为:
return new Divider(
height: 0,
indent: 16,
);
先看效果,后上码
加强版ListView代码完整如下:
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
void main()=> runApp(new MaterialApp(
theme: ThemeData(
primaryColor: Colors.red
),
home: MyFullWidget(),
));
class MyFullWidget extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return MyState();
}
}
class MyState extends State{
final List<WordPair> _suggestions = <WordPair>[];
Widget _buildRow(WordPair pair, int index){
/* return new ListTile(
title: Container(
margin: EdgeInsets.only(bottom:20, top: 20),
child:new Text(pair.asPascalCase,
style: _biggerFont,
),
),
subtitle: new Text("我就是subtitle"),
);*/
Color newColor = Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256));
return new ListBody(
children: <Widget>[
InkWell(
onTap: (){
print("click index=$index");
},
child:Container(
child: Text(pair.asPascalCase, style: TextStyle(
fontSize: 18,
color: newColor),
),
//margin: EdgeInsets.fromLTRB(20, 10, 10, 10),
padding: EdgeInsets.fromLTRB(16, 16, 10, 16)
)
)],
);
}
Widget _buildSuggestions(){
return Container(child: new ListView.builder(
padding: EdgeInsets.only(top: 0),
itemBuilder: (BuildContext _context, int i){
print("i=$i, isOdd=" + i.isOdd.toString() + ",index=" + (i ~/ 2).toString());
//判断是否是奇数
if(i.isOdd){
//显示分割线
return new Divider(
height: 0,
indent: 16,
);
}
// 语法 "i ~/ 2" 表示i除以2,但返回值是整形(向下取整)
// 比如 i 为:1, 2, 3, 4, 5 时,结果为 0, 1, 1, 2, 2,
// 这可以计算出 ListView 中减去分隔线后的实际单词对数量
//final int index = i ~/ 2;
final int index = i ~/2;
//如果是list中的最后一个单词对
if(index >= _suggestions.length){
//接着生成10个
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index], index);
return null;
},
),
);
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("App"),
backgroundColor: Colors.green,
bottom: PreferredSize(
preferredSize: Size.fromHeight(50),
child: Text("请选择您的名字",
style: TextStyle(
color: Colors.white,
fontSize: 32,
),
softWrap: false,
),
),
),
body:_buildSuggestions(),
/*InkWell(
onTap: (){
},
child: Center(
child: Text(contentText, style: TextStyle(
fontSize: 30,
color: contentColor,
),),
),
) ,*/
floatingActionButton: FloatingActionButton(
child: Text("玉玺\n在手"),
shape: Border.all(
color: Colors.orange,
width: 5
),
onPressed: ()=>{
showDialog(context: context, child: Center(
child: Text("奉天承运,你读诏曰:封你为大内总管,正二品。钦此!"),
)).whenComplete(() => print("whenComplete")) .then((value) => print("then")),
},
backgroundColor: Colors.red,
),
);
}
}
更多推荐
已为社区贡献10条内容
所有评论(0)