flutter 项目新手向结构简析

flutter中一切界面层级的东西全部都是Widget
这句话怎么理解呢?

大到整个应用,小到一个文字控件,全部都是Widget

一个常规的Application图级可能是这样的,当然实际情况下会比这复杂很多

结构图

对应代码和实际情况看一下

为了和图片对应我把所有的写到一个文件里


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter 结构简析',
      theme: new ThemeData(
        primarySwatch: Colors.blue, // 这里是项目的主色调
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView(
        children: <Widget>[
          ListTile(title: Text('我是第一个item')),
          ListTile(title: Text('我是第二个item')),
        ],
      ),
    );
  }
}

项目截图

这里的一切皆widget的意思就是
Application是Widget
Page是
Scaffold是
Appbar是
ListView是
ListTile也是
Text也是

组合达到常见的效果

以官方的一个页面为例子
https://flutter.io/tutorials/layout/

lakes-anno.png

我们来做的话就是整体是一个Column或者ListView
然后子项目是

Image
Row
  Column
    Text
    Text
  Row
    Image(Icon)
    Text
Row
  Column
      Row
        Image 
        Text
  Column
  Column
Text

当然这个是指的主体结构,实际上还会有更多的
接着不看这个链接里的代码,自己撸一个demo

demo相关

一阶段头部图片

第一阶段对应的截图

image.png

代码

class TutorialsPage extends StatefulWidget {
  @override
  _TutorialsPageState createState() => _TutorialsPageState();
}

class _TutorialsPageState extends State<TutorialsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          //为了好分辨,我将内部的4大块分为四个方法
          _buildHeader(),
        ],
      ),
    );
  }

  Widget _buildHeader() {
    // 这里对应的是图片
    return Image.asset("images/lakes_header.jpg");
  }
}

二阶段

第二阶段的截图

image.png


class _TutorialsPageState extends State<TutorialsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          //为了好分辨,我将内部的4大块分为四个方法
          _buildHeader(),
          Padding(
            //这里我观察到下面有一个整体的左右边距,所以这里单独抽取了一个padding
            child: Column(
              children: <Widget>[
                _buildSecond(), // 第二部分
              ],
            ),
            padding: const EdgeInsets.only(
              left: 30.0,
              right: 30.0,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildHeader() {
    // 这里对应的是图片
    return Image.asset("images/lakes_header.jpg");
  }

  _buildSecond() {
    Widget row = Row(
      children: <Widget>[
        Expanded(
          child: Column(
            children: <Widget>[
              Text('旅游圣地'),
              Text('不要钱',style: TextStyle(fontSize: 12.0,color: Colors.grey),),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.start,
          ),
        ),
        Row(
          children: <Widget>[
            Icon(
              Icons.star,
              color: Colors.yellow,
            ),
            Text('30'),
          ],
        ),
      ],
    );
    row = SizedBox(
      height: 60.0,
      child: row,
    );
    return row;
  }
}

第三部分

截图:

第三步


/// 对应 https://flutter.io/tutorials/layout/ 的 https://flutter.io/tutorials/layout/images/lakes.jpg 图片
class TutorialsPage extends StatefulWidget {
  @override
  _TutorialsPageState createState() => _TutorialsPageState();
}

class _TutorialsPageState extends State<TutorialsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          //为了好分辨,我将内部的4大块分为四个方法
          _buildHeader(),
          Padding(
            //这里我观察到下面有一个整体的左右边距,所以这里单独抽取了一个padding
            child: Column(
              children: <Widget>[
                _buildSecond(), // 第二部分
                _buildThird(), // 第二部分
              ],
            ),
            padding: const EdgeInsets.only(
              left: 30.0,
              right: 30.0,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildHeader() {
    // 这里对应的是图片
    return Image.asset("images/lakes_header.jpg");
  }

  _buildSecond() {
    Widget row = Row(
      children: <Widget>[
        Expanded(
          child: Column(
            children: <Widget>[
              Text('旅游圣地'),
              Text('不要钱',style: TextStyle(fontSize: 12.0,color: Colors.grey),),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.start,
          ),
        ),
        Row(
          children: <Widget>[
            Icon(
              Icons.star,
              color: Colors.yellow,
            ),
            Text('30'),
          ],
        ),
      ],
    );
    row = SizedBox(
      height: 60.0,
      child: row,
    );
    return row;
  }

  _buildThird() {
    Widget buildItem(IconData iconData, String text) {
      return Expanded(
        child: SizedBox(
          height: 50.0,
          child: Column(
            children: <Widget>[
              Icon(
                iconData,
                color: Colors.blue,
              ),
              Text(
                text,
                style: TextStyle(color: Colors.blue),
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          ),
        ),
      );
    }

    return Row(
      children: <Widget>[
        buildItem(Icons.phone, '呼叫'),
        buildItem(Icons.room, '导航'),
        buildItem(Icons.share, '分享'),
      ],
    );
  }
}

第四部分

image.png


/// 对应 https://flutter.io/tutorials/layout/ 的 https://flutter.io/tutorials/layout/images/lakes.jpg 图片
class TutorialsPage extends StatefulWidget {
  @override
  _TutorialsPageState createState() => _TutorialsPageState();
}

class _TutorialsPageState extends State<TutorialsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          //为了好分辨,我将内部的4大块分为四个方法
          _buildHeader(),
          Padding(
            //这里我观察到下面有一个整体的左右边距,所以这里单独抽取了一个padding
            child: Column(
              children: <Widget>[
                _buildSecond(), // 第二部分
                _buildThird(),
                _buildFourth(),
              ],
            ),
            padding: const EdgeInsets.only(
              left: 30.0,
              right: 30.0,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildHeader() {
    // 这里对应的是图片
    return Image.asset("images/lakes_header.jpg");
  }

  _buildSecond() {
    Widget row = Row(
      children: <Widget>[
        Expanded(
          child: Column(
            children: <Widget>[
              Text('旅游圣地'),
              Text(
                '不要钱',
                style: TextStyle(fontSize: 12.0, color: Colors.grey),
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.start,
          ),
        ),
        Row(
          children: <Widget>[
            Icon(
              Icons.star,
              color: Colors.yellow,
            ),
            Text('30'),
          ],
        ),
      ],
    );
    row = SizedBox(
      height: 60.0,
      child: row,
    );
    return row;
  }

  _buildThird() {
    Widget buildItem(IconData iconData, String text) {
      return Expanded(
        child: SizedBox(
          height: 50.0,
          child: Column(
            children: <Widget>[
              Icon(
                iconData,
                color: Colors.blue,
              ),
              Text(
                text,
                style: TextStyle(color: Colors.blue),
              ),
            ],
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          ),
        ),
      );
    }

    return Row(
      children: <Widget>[
        buildItem(Icons.phone, '呼叫'),
        buildItem(Icons.room, '导航'),
        buildItem(Icons.share, '分享'),
      ],
    );
  }

  _buildFourth() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(
        '这个旅游地方我也不知道是什么地方,有什么流弊的,不过看起来还不错.\n\n'
            '这篇文章就到这里基本也没啥说的了,这个是第四部分,我就把内容直接放在Widget里面了,感谢观看,后面我可能会出一个简易的FAQ,专门写一些小白问题☺☺☺☺☺',
        style: TextStyle(
          fontSize: 13.0,
        ),
      ),
    );
  }
}

flutter 项目新手向结构简析

对应代码和实际情况看一下

组合达到常见的效果

demo相关

一阶段 头部图片

二阶段

第三部分

第四部分

推荐阅读更多精彩内容

一阶段头部图片