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

已收录   阅读次数: 639
2021-06-2018:18:45 发表评论
摘要

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

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

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

开篇寄语

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

前情提要

内容详情

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

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

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

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"),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

生成的效果如下图所示:

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

看起来是不是很像套娃?

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   "),
        ]),
      ),
    );
  }
}

生成效果如下图所示:

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

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"),
        ]),
      ),
    );
  }
}

生成效果如下图所示:

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

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(),
      )),
    ));
  }
}

生成效果如下图所示:

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

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,
          ),
        ],
      )),
    ));
  }
}

生成的效果如下图所示:

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

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,
          )
        ],
      )),
    ));
  }
}

生成的效果如下图所示:

Flutter制作自己的第一个全平台APP学习之Layouts篇
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: