【学习 Flutter】添加图片

继续为当前 app 添加图片，在添加图片前提一下语法的几点注意：

• 返回值：建议函数带上返回值，当不符合指定的返回值 IDE 会给出错误提示
• 类型：建议无论方法、参数都加上类型
• @override：代表这是继承父类后需要重写的方法，让该方法更清晰

Scaffold body 属性

上节课我们已经使用过了 appBar 属性， appBar 是应用的顶部栏，那顶部栏之下的位置该怎么处理呢？

Scaffold 提供了 boday 属性来存放顶部栏下的界面组件

这里使用 Card 组件

• Card 组件提供一个重要的 child 属性，用于指定子组件
• 我们需要上图下字显示，因此子组件使用 Column 组件（上下紧邻的布局类组件），同时提供重要的 children 属性
• children 属性类型是一个数组，代表多个，这里我们放 Image 组件与 Text 组件
• Image 组件属于图片组件
  • 创建一个自定义文件夹（assets）将图片放到这里，路径比如：assets/food.jpg
  • 需要解除 pubspec.yaml 中 assets 里的注释
  • 为 Image 组件的特殊构造方法 asset 传递路径字符串参数，来构造图片
• Text 组件则是文本字符串

class MyApp extends StatelessWidget { // 最顶层的自定义根组件
  @override
  Widget build(BuildContext context) {
    return MaterialApp( // 这个是 material 包裹的应用
      home: Scaffold( // 一个可以设置页面结构的白色页面
        appBar: AppBar( // 应用顶栏
          title: Text('Hello world'), // 文字内容，这个字符串参数就属于位置参数
        ),
        body: Card(
            child: Column(
                children: [
                    Image.asset(`assets/food.jpg`),
                    Text('Food')
                ]
            )
        )
      ),
    );
  }
}

最终 Card 的显示效果，会发现 Card 完全占满顶部栏之下的位置，之后将会继续调整

Card 组件 上图下字