flutter 例子1 - 创建一个简单的静态界面

https://www.tuicool.com/articles/zaAjA3n

创建一个静态界面

效果图

参考教程 https://flutter.io/tutorials/layout/#approach

添加了一张图片

图片资源存放位置

pubspec.yaml 中添加assets

# To add assets to your application, add an assets section, like this:
  assets:
    - images/android_1.jpg

这个地方要注意缩进，否则AS可能会不允许编译。

从效果图中可以看到，页面中有一张大图片，一个小标题栏，有3个按钮的横栏，以及下方的大段文字。

整个视图用一个 ListView 包含了所需的所有widget。写这个界面的过程，就像是Android中写layout文件。

approach_1.dart 代码。项目中使用的是material design的图标。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // 应用的根widget
  @override
  Widget build(BuildContext context) {
    // 图片下方的小标题栏
    Widget titleSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Row(
        children: <Widget>[
          new Expanded(child:
          new Column(crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Container(padding: const EdgeInsets.only(bottom: 8.0),
                child: new Text('Android Device',
                  style: new TextStyle(fontWeight: FontWeight.bold),),),
              new Text(
                'Rust Fisher', style: new TextStyle(color: Colors.grey[500]),)
            ],
          )),
          new Icon(Icons.star, color: Colors.red,),
          new Text('42')
        ],
      ),
    );

    // 定义在方法里面的方法 nested function
    Column buildButtonColumn(IconData icon, String label) {
      Color color = Theme
          .of(context)
          .primaryColor;

      return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          new Icon(icon, color: color),
          new Container(
            margin: const EdgeInsets.only(top: 8.0),
            child: new Text(
              label,
              style: new TextStyle(
                fontSize: 12.0, fontWeight: FontWeight.w400, color: color,),
            ),
          ),
        ],
      );
    }

    Widget buttonSection = new Container(
      child: new Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          buildButtonColumn(Icons.call, '通话'),
          buildButtonColumn(Icons.near_me, '定位'),
          buildButtonColumn(Icons.share, '分享'),
        ],
      ),);

    Widget textSection = new Container(padding: const EdgeInsets.all(32.0),
      child: new Text(
        '''
Flutter Tutorials

The Flutter Tutorials teach you how to use the Flutter framework to build mobile applications for iOS and Android.

Choose from the following:

·Building Layouts in Flutter
    How to build layouts using Flutter’s layout mechanism. Once you’ve learned basic principles, you’ll build the layout for a sample screenshot.
·Adding Interactivity to Your Flutter App
    You’ll extend the simple layout app created in “Building Layouts in Flutter” to make an icon tappable. Different ways of managing a widget’s state are also discussed.
·Animations in Flutter
    Explains the fundamental classes in the Flutter animation package (controllers, Animatable, curves, listeners, builders), as it guides you through a progression of tween animations using different aspects of the animation APIs.
·Internationalizing Flutter Apps
    Learn how to internationalize your Flutter application. A guide through the widgets and classes that enable apps to display their content using the user’s language and formatting conventions.
'''
        , softWrap: true,),);

    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(title: new Text('Flutter Approach 1'),),
        body: new ListView(children: <Widget>[
          new Image.asset(
            'images/android_1.jpg', width: 600.0,
            height: 240.0,
            fit: BoxFit.cover,),
          titleSection,
          buttonSection,
          textSection
        ],),),
    );
  }
}

因flutter的绘制特性，Android开发者选项中-显示布局边界功能对flutter绘制出的界面并没什么作用。