美文网首页
2.Flutter部件Listview的简单使用

2.Flutter部件Listview的简单使用

作者: 凯司机 | 来源:发表于2020-05-30 13:05 被阅读0次

    import 'package:flutter/material.dart';

    main() {

    runApp(KSJApp());

    }

    class KSJAppextends StatelessWidget {

    @override

      Widgetbuild(BuildContext context) {

    return MaterialApp(

    debugShowCheckedModeBanner:false,

          home:KSJHomePage(),

        );

      }

    }

    class KSJHomePageextends StatelessWidget {

    @override

      Widgetbuild(BuildContext context) {

    return Scaffold(

    appBar:AppBar(

    title:Text('商品列表')

    ),

          body:KSJHomePageBody(),

        );

      }

    }

    class KSJHomePageBodyextends StatelessWidget {

    @override

      Widgetbuild(BuildContext context) {

    // listView是可以滚动的

        return ListView(

    padding:EdgeInsets.only(top:8),

          children: [

    KSJHomePageBodyItemWidget("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),

            KSJHomePageBodyItemWidget("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),

            KSJHomePageBodyItemWidget("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),

            KSJHomePageBodyItemWidget("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),

            KSJHomePageBodyItemWidget("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),

            KSJHomePageBodyItemWidget("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),

            KSJHomePageBodyItemWidget("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),

            KSJHomePageBodyItemWidget("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),

            KSJHomePageBodyItemWidget("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),

            KSJHomePageBodyItemWidget("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),

            KSJHomePageBodyItemWidget("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),

            KSJHomePageBodyItemWidget("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),

            KSJHomePageBodyItemWidget("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),

            KSJHomePageBodyItemWidget("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),

            KSJHomePageBodyItemWidget("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),

          ],

        );

      }

    }

    class KSJHomePageBodyItemWidgetextends StatelessWidget {

    final Stringtitle;

      final Stringdesc;

      final StringimageURL;

      final style1 =TextStyle(fontSize:25, color: Colors.orange);

      final style2 =TextStyle(fontSize:15, color: Colors.green);

      KSJHomePageBodyItemWidget(this.title, this.desc, this.imageURL);

      @override

      Widgetbuild(BuildContext context) {

    return Container(

    decoration:BoxDecoration(

    border:Border.all(width:8,color: Colors.black12)

    ),

          child:Column(

    // 主轴的简单使用

            crossAxisAlignment: CrossAxisAlignment.start,

            children: [

    SizedBox(height:8),

              Text(this.title, style:style1),

              SizedBox(height:8),

              Text(this.desc,  style:style2),

              // 图片具有IO操作来处理耗时操作

    // 注意图形警告

              Container(

    padding:EdgeInsets.all(8),

                  child:Image.network(this.imageURL,fit: BoxFit.cover))

    ],

          ),

        );

      }

    }

    相关文章

      网友评论

          本文标题:2.Flutter部件Listview的简单使用

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