美文网首页
8. ListView简单使用的几种方法

8. ListView简单使用的几种方法

作者: 凯司机 | 来源:发表于2020-06-06 17:21 被阅读0次

    import 'package:flutter/material.dart';

    main() => runApp(KSJMyApp());

    class KSJMyAppextends StatelessWidget {

    @override

      Widgetbuild(BuildContext context) {

    return MaterialApp(

    home:MyApp(),

        );

      }

    }

    class MyAppextends StatelessWidget {

    @override

      Widgetbuild(BuildContext context) {

    return Scaffold(

    appBar:AppBar(

    title:Text('KSJ'),

          ),

          body:ListView(

    children: [

    Container(

    height:300,

                child:ListView.separated(

    itemBuilder: (BuildContext context, int index) {

    return Text("你好1");

                    },

                    separatorBuilder: (BuildContext context, int index) {

    return Divider(

    color: Colors.red,

                        height:100,

                        indent:30,

                        endIndent:30,

                        thickness:10,

                      );

                    },

                    itemCount:100),

              ),

              Container(

    height:300,

                child:ListView.separated(

    itemBuilder: (BuildContext context, int index) {

    return Text("你好2");

                    },

                    separatorBuilder: (BuildContext context, int index) {

    return Divider(

    color: Colors.red,

                        height:100,

                        indent:30,

                        endIndent:30,

                        thickness:10,

                      );

                    },

                    itemCount:100),

              ),

              Container(

    height:300,

                child:ListView.separated(

    itemBuilder: (BuildContext context, int index) {

    return Text("你好3");

                    },

                    separatorBuilder: (BuildContext context, int index) {

    return Divider(

    color: Colors.red,

                        height:100,

                        indent:30,

                        endIndent:30,

                        thickness:10,

                      );

                    },

                    itemCount:100),

              ),

            ],

          ),

          floatingActionButton:FloatingActionButton(

    child:Icon(Icons.add),

              onPressed: () {

    print("+++");

              }),

          floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

        );

      }

    }

    class ListViewBuildNewWidgetextends StatelessWidget {

    const ListViewBuildNewWidget({

    Key key,

      }) :super(key: key);

      @override

      Widgetbuild(BuildContext context) {

    return ListView.builder(

    itemCount:100,

          itemBuilder: (BuildContext context, int index) {

    return Container(

    width: double.infinity,

              height:100,

              color: index %2 ==0 ? Colors.red : Colors.black,

    //            child: Container(

    //              child: Text(

    //                "你好"

    //              ),

    //            ),

            );

          },

        );

      }

    }

    class ListViewNewWidgetextends StatelessWidget {

    const ListViewNewWidget({

    Key key,

      }) :super(key: key);

      @override

      Widgetbuild(BuildContext context) {

    return ListView(

    //        scrollDirection: Axis.horizontal,

    // item的宽度

    //      itemExtent: 120,

          children:List.generate(1, (index) {

    // ignore: missing_

            return ListTile(

    leading:Icon(Icons.people),

              trailing:Icon(Icons.delete),

              title:Text("联系人${index +1}"),

              subtitle:Text('联系人电话号码:18201532507'),

              isThreeLine:true,

            );

          }),

        );

      }

    }

    相关文章

      网友评论

          本文标题:8. ListView简单使用的几种方法

          本文链接:https://www.haomeiwen.com/subject/evqftktx.html