Flutter项目实战-我的第一个Flutter项目--Flutter容器模型(三)

从零开始学安卓
94 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情

一、HTML盒子模型

在了解Flutter的盒子模型前，我们先来看一下Html的盒子模型。

image.png

页面元素包含了margin(外边距),border(边框),padding(内边距)

网页中的各个元素都可以看成是一个一个的盒子，通过对盒子的摆放，形成对网页的布局。

而Flutter的盒子模型也是和HTML一样。

二、Flutter盒子

由于这里的Demo暂时都不涉及状态改变,所以代码中使用Stateless无状态组件即可。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 盒子模型',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('盒子模型'),
        ),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            child: Container(
              color: Colors.red,
              margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
              child: Container(
                margin: EdgeInsets.fromLTRB(10, 10, 10, 10),
                color: Colors.white60,
                child: Text('测试展示一段长文字，测试展示一段长文字,测试测试测试'),
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

先来看一下展示效果

image.png

2.1 页面结构

我们从body元素开始分析

  • Center:居中组件
    • Containter: width-300 height-300,颜色为蓝色
      • child :Container元素
  • 没有指定大小，通过margin以及盒子模型进行约束，颜色为红色,上下左右的边缘margin为10
        • child:Container元素
  • 通过盒子模型进行大小位置的约束，颜色为百分之60透明度的白色，上下左右的边缘margin为10
        • -child:Text文本

2.2 布局空间模拟显示

在调试布局时，我们可以启用网格线以及标尺等

2.2.1 main.dart引入包

import 'package:flutter/rendering.dart';

2.2.2 在main函数中打开开关

image.png

三、图片展示约束

3.1 行排列

接下来我们再用图片的排列感受一下Flutter的排列布局约束

body: Center(
  child: new Row(
    //对齐方式:平均间隔
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      new Image.asset('images/a.jpg', width: 100.0, height: 300.0),
      new Image.asset('images/b.jpg', width: 100.0, height: 50.0),
      new Image.asset('images/a.jpg', width: 30.0, height: 80.0),
    ],
  ),
),

image.png

可以看到上图用到了Center和Row两个布局空间，使用Center包裹了Row,使得行排列控件居中对齐了

Row中又用到了MainAxisAlignment.spaceEvenly的对齐方式使得三张图片平均间隔的方式横向排列。

3.2 列排列

body: Center(
  child: new Column(
    //对齐方式:平均间隔
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      new Image.asset('images/a.jpg', width: 100.0, height: 300.0),
      new Image.asset('images/b.jpg', width: 100.0, height: 50.0),
      new Image.asset('images/a.jpg', width: 30.0, height: 80.0),
    ],
  ),
),

将Row元素更改成Column,就从行排列转换成了列排列。

image.png

在行排列中mainAxisAlignment控制水平方向的对齐，而在列排列中控制垂直方向的对齐，另外一个方向使用crossAxisAlignment元素控制

3.3 复杂嵌套

在熟悉了基本的排列规则之后，我们尝试绘制一个较为复杂的界面

image.png

在下手之前，我们可以先把界面元素拆分成下方的图片加上部的整块区域

这两块区域用Column包裹即可，接下来再去尝试实现第一块区域的排列，进行细小的拆分，类似AS中LinearLayout的多级嵌套。

3.4 控件缩放

使用flex实现控件的缩放

body: Center(
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(child: Image.asset('images/a.jpg')),
      Expanded(flex: 2, child: Image.asset('images/b.jpg')),
      Expanded(child: Image.asset('images/a.jpg')),
    ],
  ),
),
image.png

四、总结

通过flutter的盒子模型，我们实现了自己搭建一个较复杂的页面效果，接下来，让我们继续探索flutter吧~

avatar
文章
阅读
粉丝