静态页面示例

lib.zip

效果

main.dart

import "package:flutter/material.dart";
import './lakes/Lakes.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Lakes(),
    );
  }
}

lakes/Lakes.dart

import "package:flutter/material.dart";
import "./TitleSection.dart";
import "./IconSection.dart";
import "./TextSection.dart";
class Lakes extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          // 第一部分
          Container(
            height: 300,
            child: Image(
              fit: BoxFit.cover,
              image: AssetImage('images/1.jpg'),
            ),
          ),
          // 第二部分
          TitleSection(),
          // 第三部分
          IconSection(),
          // 第四部分
          TextSection(),
        ],
      ),
    );
  }
}
// Column 纵向排版
// Row 横向排版
// 给他们俩个传递参数，都会有一个属性 children，后面跟着一个数组，
// 数组里面的每一项都是一个 Widget 组件

lakes/TitleSection.dart

import "package:flutter/material.dart";
class TitleSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 20, left: 20, right: 20),
      child: Row(
        // Row主轴：从左到右
        children: <Widget>[
          // 左部分
          // Expanded 弹性布局组件
          Expanded(
            child: Column(
              // Column主轴：从上到下
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.only(bottom: 5),
                  child: Text('我是 demo 标题', style: TextStyle(fontWeight: FontWeight.w700)),
                ),
                Text('我是 demo 副标题', style: TextStyle(color: Colors.grey)),
              ],
            ),
          ),
          // 中 星星图标
          Icon(Icons.star, color: Colors.red),
          // 右 数字
          Text('41'),
        ],
      ),
    );
  }
}

lakes/IconSection.dart

import "package:flutter/material.dart";
class IconSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _IconItem(title: 'call', icon: Icons.call),
          _IconItem(title: 'route', icon: Icons.near_me),
          _IconItem(title: 'share', icon: Icons.share),
        ],
      ),
    );
  }
}
class _IconItem extends StatelessWidget {
  _IconItem({key, @required this.icon, @required this.title}) : super(key: key);
  final IconData icon;
  final String title;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Padding(
          padding: EdgeInsets.only(bottom: 5),
          child: Icon(icon, color: Colors.blue),
        ),
        Text(title, style: TextStyle(color: Colors.blue)),
      ],
    );
  }
}

lakes/TextSection.dart

import "package:flutter/material.dart";
class TextSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Text('''
        Flutter与用于构建移动应用程序的其它大多数框架不同，因为Flutter既不使用WebView，也不使用操作系统的原生控件。 相反，Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。
        Flutter使用Skia作为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了非常友好的API，目前Google Chrome浏览器和Android均采用Skia作为其绘图引擎。
      ''', style: TextStyle(height: 1.2)),
    );
  }
}