08、Flutter开发创建项目及其案例（三）

一、自定义Widget

此次例子中，项目就是一个大的widget

标题的Widget：使用一个Text Widget完成；
描述的Widget：使用一个Text Widget完成；
图片的Widget：使用一个Image Widget完成；
上面三个Widget要垂直排列，我们可以使用一个Column的Widget
另外，三个展示的标题、描述、图片都是不一样的，所以我们可以让Parent Widget来决定内容：
创建三个成员变量保存父Widget传入的数据

class ProductItem extends StatelessWidget {
    
    
  final String title;
  final String desc;
  final String imageURL;

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

  @override
  Widget build(BuildContext context) {
    
    
    return Column(
      children: <Widget>[
        Text(title, style: TextStyle(fontSize: 24)),
        Text(desc, style: TextStyle(fontSize: 18)),
        Image.network(imageURL)
      ],
    );
  }
}

二、列表数据展示

现在我们就可以创建三个ProductItem来让他们展示了：

MyApp和上一个章节是一致的，没有任何改变；
HomeContent中，我们使用了一个Column，因为我们创建的三个ProductItem是垂直排列的

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blueAccent
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("CODERWHY"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Column(
      children: <Widget>[
        ProductItem("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
        ProductItem("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
        ProductItem("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),
      ],
    );
  }
}

运行代码后：
错误信息：下面出现了黄色的斑马线；
这是因为在Flutter的布局中，内容是不能超出屏幕范围的，当超出时不会自动变成滚动效果，而是会报下面的错误；
解决办法：
我们将Column换成ListView即可；
ListView可以让自己的子Widget变成滚动的效果；

三、案例细节调整

3.1 界面整体边距

如果我们希望整个内容距离屏幕的边缘有一定的间距
我们需要使用另外一个Widget：Padding，它有一个padding属性用于设置边距大小；
没错，设置内边距也是使用Widget，这个Widget就是Padding；

我们现在希望给所有的商品也添加一个内边距，并且还有边框：
我们可以使用一个Container的Widget，它里面有padding属性，并且可以通过decoration来设置边框；
Container我们也会在后面详细来讲，我们先用起来；

3.2 文字图片的间距

我们希望给图片和文字之间添加一些间距：
方式一：给图片或者文字添加一个向上的内边距或者向下的内边距；
方式二：使用SizedBox的Widget，设置一个height属性，可以增加一些距离；

3.5. 最终实现代码


import 'package:flutter/material.dart';

main(List<String> args) {
    
    
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blueAccent
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("CODERWHY"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView(
        children: <Widget>[
          ProductItem("Apple1", "Macbook Product1", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg"),
          ProductItem("Apple2", "Macbook Product2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
          ProductItem("Apple3", "Macbook Product3", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),
        ],
      ),
    );
  }
}

class ProductItem extends StatelessWidget {
    
    
  final String title;
  final String desc;
  final String imageURL;

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

  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        border: Border.all()
      ),
      child: Column(
        children: <Widget>[
          Text(title, style: TextStyle(fontSize: 24)),
          Text(desc, style: TextStyle(fontSize: 18)),
          SizedBox(height: 10,),
          Image.network(imageURL)
        ],
      ),
    );
  }
}