Flutter制作自己的第一个全平台APP学习之Layouts篇

摘要

伯衡君发现总结了有关flutter编程语言以制作全平台的App，通过前一篇梳理Widgets组件内容，感到思路清晰了不少，这一篇文章继续进行梳理，有关Layouts的内容，这个相当于Web中的

的样子，也是一个个框架结构，又细分不少内容，伯衡君希望进行梳理后，有一个整体的认知，让我们开始吧……

开篇寄语

伯衡君发现总结了有关flutter编程语言以制作全平台的App，通过前一篇梳理Widgets组件内容，感到思路清晰了不少，这一篇文章继续进行梳理，有关Layouts的内容，这个相当于Web中的<div></div>的样子，也是一个个框架结构，又细分不少内容，伯衡君希望进行梳理后，有一个整体的认知，让我们开始吧。

前情提要

• 《Flutter2发布，一套代码适用全系统应用开发以及Web应用》
• 《如何在Mac M1芯片电脑上安装Flutter并建立自己第一个全系统应用》
• 《如何在Windows电脑上安装Flutter并建立自己第一个全系统应用》
• 《Flutter制作自己的第一个全平台APP学习之Widgets篇》

内容详情

以下内容大多是更改lib下的main.dart文件内容，删掉里面的内容，复制粘贴代码，开启调试就可以出现了。

官网开发文档中给出了各个布局使用的名称以及所属关系，咱们就按照这个先后顺序进行了解即可。

Container

• Container在前文中想必在程式代码中已经了解，简单来说它正如字面意思是一个容器，在这个容器中可以进行布局，或者放入更多的容器，试举例如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root
  // of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Insert Image Demo'),
        ),
        body: Center(
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.blue,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all(width: 5.0),
                    color: Colors.yellow,
                    borderRadius: BorderRadius.circular(20.0)),
                padding: const EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0),
                child: Container(
                  color: Colors.red,
                  padding: const EdgeInsets.symmetric(
                      vertical: 10.0, horizontal: 20.0),
                  transform: Matrix4.rotationZ(-0.1),
                  child: Container(
                    decoration: const BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.horizontal(
                        left: Radius.circular(10.0),
                        right: Radius.circular(30.0),
                      ),
                    ),
                    alignment: Alignment.topLeft,
                    child: const Text("hello"),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

生成的效果如下图所示：

看起来是不是很像套娃？

Row, Column

• Row正如字面之意，是指的横向排列
• Column也正如字面之意，是指的横向排列

Row框架代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root
  // of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Insert Image Demo'),
        ),
        body: Row(children: <Widget>[
          Text("12345   "),
          Text("678910   "),
          Text("1112131415   "),
          Text("1112131415   "),
        ]),
      ),
    );
  }
}

生成效果如下图所示：

Column框架代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root
  // of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Insert Image Demo'),
        ),
        body: Column(children: <Widget>[
          Text("12345"),
          Text("678910"),
          Text("1112131415"),
          Text("1112131415"),
        ]),
      ),
    );
  }
}

生成效果如下图所示：

Wrap

• 这个可以理解成智能的Row和Column，当横向排列的元素足够多的时候此前可能不在屏幕显示，也就是跳脱出画面，如果使用Wrap则会智能的平均分配另起一行，不至于导致元素冲出画面，代码如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root
  // of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('Insert Image Demo'),
      ),
      body: Center(
          child: Wrap(
        // Gap between adjacent chips.
        direction: Axis.vertical,
        spacing: 8.0,
        // Gap between lines.
        runSpacing: 4.0,
        children: [
          'Cauchy',
          'Fourrier',
          'Lagrange',
          'Lebesgue',
          'Levy',
          'Poisson',
          'Pointcare',
        ]
            .map((String name) => Chip(
                  avatar: CircleAvatar(child: Text(name.substring(0, 1))),
                  label: Text(name),
                ))
            .toList(),
      )),
    ));
  }
}

生成效果如下图所示：

FractionallySizedBox

• 简单来说就是能够精确控制子部件的空间位置，这个无需做过多演示

Expanded

• 扩展 Row、Column 或 Flex 的子级以便子级填充可用空间的小部件，换句话说呢，就是在框架里面，填充又一种框架，试举例如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root
  // of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('Insert Image Demo'),
      ),
      body: Center(
          child: Row(
        children: <Widget>[
          Container(
            child: Center(
              child: Text(
                'First widget',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            color: Colors.blue,
            height: 200,
            width: 100,
          ),
          Expanded(
            child: Container(
              child: Center(
                child: Text(
                  'Second widget',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                ),
              ),
              color: Colors.amber,
              height: 200,
            ),
          ),
          Container(
            child: Center(
              child: Text(
                'Third widget',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            color: Colors.pink,
            height: 200,
            width: 100,
          ),
        ],
      )),
    ));
  }
}

生成的效果如下图所示：

Stack

• Stack 小部件允许我们在屏幕上放置多层小部件，试举例如下：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root
  // of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('Insert Image Demo'),
      ),
      body: Center(
          child: Stack(
        children: <Widget>[
          // Max Size
          Container(
            color: Colors.green,
          ),
          Container(
            color: Colors.blue,
            height: 300.0,
            width: 300.0,
          ),
          Container(
            color: Colors.pink,
            height: 150.0,
            width: 150.0,
          )
        ],
      )),
    ));
  }
}

生成的效果如下图所示：