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,
      ),
    );
  }

}


 

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐