第一个案例带标题、描述、和图片的滚动列表

1. 标题的Widget：使用一个Text Widget完成；
2. 描述的Widget：使用一个Text Widget完成；
3. 图片的Widget：使用一个Image Widget完成；

上面三个Widget要垂直排列，我们可以使用一个Column的Widget

class MKHomeProductItem extends StatelessWidget {
  final String title;
  final String desc;
  final String imageURL;
  MKHomeProductItem(this.title,this.desc,this.imageURL);
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),//边框与内容
      decoration:BoxDecoration(//边线
        border:Border.all(
          width:5,
          color:Colors.purple
        )
      ),
      child:Column(
        crossAxisAlignment: CrossAxisAlignment.start,
      children:[
        Text(title,style: TextStyle(fontSize: 25,color:Colors.orange)),
        SizedBox(height: 8),//标题与描述中间高度
        Text(desc,style: TextStyle(fontSize: 20,color:Colors.yellow)),
        SizedBox(height: 8),
        Image.network(imageURL)
      ]
    )
    );
  }
}

使用Column让三个ProductItem垂直排列

class MKHomeContent extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Column(
   children:[
    MKHomeProductItem("1",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
    MKHomeProductItem("2",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
    MKHomeProductItem("3",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
    MKHomeProductItem("4",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
   ]
  );
 }
}

运行后，整个列表超出手机长度，有警示线

则在四个产品样式外面的Column换成ListView

class MKHomeContent extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return ListView(//已更换
   children:[
    MKHomeProductItem("1",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
    MKHomeProductItem("2",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
    MKHomeProductItem("3",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
    MKHomeProductItem("4",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
   ]
  );
 }
}

最终代码

import 'package:flutter/material.dart';
main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   home:MKHomePage()
  );
 }
}
class MKHomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title:Text("商品列表"),
   ),
    body:MKHomeContent()
  );
 }
}
class MKHomeContent extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return ListView(
   children:[
    MKHomeProductItem("1",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
    MKHomeProductItem("2",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
    MKHomeProductItem("3",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
    MKHomeProductItem("4",'12121','https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
   ]
  );
 }
}
class MKHomeProductItem extends StatelessWidget {
 final String title;
 final String desc;
 final String imageURL;
 MKHomeProductItem(this.title,this.desc,this.imageURL);
 @override
 Widget build(BuildContext context) {
  return Container(
   padding: EdgeInsets.all(8),
   decoration:BoxDecoration(
    border:Border.all(
     width:5,
     color:Colors.purple
    )
   ),
   child:Column(
    crossAxisAlignment: CrossAxisAlignment.start,
   children:[
    Text(title,style: TextStyle(fontSize: 25,color:Colors.orange)),
    SizedBox(height: 8),
    Text(desc,style: TextStyle(fontSize: 20,color:Colors.yellow)),
    SizedBox(height: 8),
    Image.network(imageURL)
   ]
  )
  );
 }
}

第二个案例带状态（数据）的操作加减框

居中布局，两个按钮框加一个文本显示，完整代码

import 'package:flutter/material.dart';
main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   home:MKHomePage()
  );
 }
}
class MKHomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
    title:Text("商品列表"),//标题
   ),
    body:MKHomeContent()
  );
 }
}
 
 class MKHomeContent extends StatefulWidget {
 @override
 State<StatefulWidget> createState() {
 return _MKHomeContentState();
 }
 }

 class _MKHomeContentState extends State<MKHomeContent>{//自用命名规范用_
  int _counter =0;//注意变量位置
  @override
 Widget build(BuildContext context) {
  
  return Center(//内容 child是因为只有一个元素
   child:Column(//分为两行
    mainAxisAlignment: MainAxisAlignment.center,
    children:[
     Row(//分为两列
      mainAxisAlignment: MainAxisAlignment.center,
      children:[
       RaisedButton(child:Text("+"), onPressed:(){//按钮1
         _counter++;//操作
        setState(() {//更新视图
        });
       }),
       RaisedButton(child:Text("-"), onPressed:(){//按钮2
         _counter--;
        setState(() {
        });
       }),
      ]
     ),
     Text("当前计数$_counter")//文本
    ]
   )
  );
 }
 }

StatefulWidget介绍

flutter在设计的时候就决定了一旦Widget中展示的数据发生变化，就重新构建整个Widget。

StatefulWidget可以储存变量。