flutter学习-day11-容器类组件

目录

1. 填充组件Padding和EdgeInsets
2. 装饰容器DecoratedBox和BoxDecoration
3. 变换Transform
   1. RotatedBox

---

本文学习和引用自《Flutter实战·第二版》：作者：杜文

1. 填充组件Padding和EdgeInsets

Flutter里的padding和EdgeInsets是用来控制组件的填充和边距的。Padding一般包含一个child，以及一个EdgeInsetsGeometry抽象类，开发中，我们一般都使用EdgeInsets类，它是EdgeInsetsGeometry的一个子类，定义了一些设置填充的便捷方法，如下：

方法	值	描述
fromLTRB	double：left、top、right、bottom	分别指定四个方向的填充
all	double	所有方向均使用相同数值的填充
only	double：{left, top, right ,bottom }	设置具体某个方向的填充
symmetric	double：{ vertical, horizontal }	设置对称方向的填充

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(title),
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    ),
    body: const SizedBox(
      width: double.infinity,
      child: Padding(
        padding: EdgeInsets.all(16.16),
        child: Column(
          children: [
            Padding(
                padding: EdgeInsets.only(left: 20.0),
                child: Text('Padding-Left：20')),
            Padding(
                padding: EdgeInsets.symmetric(vertical: 8),
                child: Text('Padding-vertical：8'))
          ],
        ),
      ),
    ),
  );
}

2. 装饰容器DecoratedBox和BoxDecoration

DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰，如背景、边框、渐变等。但是通常会直接使用BoxDecoration类，它是一个Decoration的子类，实现了常用的装饰元素的绘制。

方法	值	描述
decoration	BoxDecoration	代表将要绘制的装饰
position	background、foreground	决定在哪里绘制

• 渐变色按钮的例子：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        ),
        body: DecoratedBox(
            decoration: BoxDecoration(
                gradient:
                    const LinearGradient(colors: [Colors.red, Colors.green]),
                borderRadius: BorderRadius.circular(3.0),
                boxShadow: const [
                  BoxShadow(
                      color: Colors.black,
                      offset: Offset(2.0, 2.0),
                      blurRadius: 4.0)
                ]),
            child: const Padding(
              padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
              child: Text(
                "Login",
                style: TextStyle(color: Colors.white),
              ),
            )));
  }

3. 变换Transform

Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4是一个4D矩阵，通过它我们可以实现各种矩阵操作。

Transform的变换是应用在绘制阶段，而并不是应用在布局阶段，所以无论对子组件应用何种变化，其占用空间的大小和在屏幕上的位置都是固定不变的，因为这些是在布局阶段就确定的。

属性	值	描述
Transform.translate	offset: Offset(-20.0, -5.0)	在绘制时沿x、y轴对子组件平移指定的距离
Transform.rotate	angle:math.pi/2	对子组件进行旋转变换（需要先导包：import ‘dart:math’ as math;）
Transform.scale	offset: Offset(-20.0, -5.0)	对子组件进行缩小或放大

• 矩阵变换

Container(
  color: Colors.black,
  child: Transform(
    // 相对于坐标系原点的对齐方式
    alignment: Alignment.topRight,
    // 沿Y轴倾斜0.3弧度
    transform: Matrix4.skewY(0.3),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      color: Colors.red,
      child: const Text('Hello world!'),
    ),
  ),
)

• 平移

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  //默认原点为左上角，左移20像素，向上平移5像素  
  child: Transform.translate(
    offset: Offset(-20.0, -5.0),
    child: Text("Hello world"),
  ),
)

• 旋转

import 'dart:math' as math;  

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  child: Transform.rotate(
    //旋转90度
    angle:math.pi/2 ,
    child: Text("Hello world"),
  ),
)

• 缩放

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  child: Transform.scale(
    scale: 1.5, //放大到1.5倍
    child: Text("Hello world")
  )
);

3-1. RotatedBox

RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    DecoratedBox(
      decoration: BoxDecoration(color: Colors.red),
      //将Transform.rotate换成RotatedBox  
      child: RotatedBox(
        quarterTurns: 1, //旋转90度(1/4圈)
        child: Text("Hello world"),
      ),
    ),
    Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),)
  ],
)

4. 容器组件Container

Container是一个组合类容器，它本身不对应具体的RenderObject，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景

属性	值	描述
alignment	-	对齐
padding	-	内边距
color	-	背景色，和decoration互斥
decoration	-	背景装饰
foregroundDecoration	-	前景装饰
width	-	宽
height	-	高
constraints	-	约束，和width和height互斥
margin	-	外边距
transform	-	变换
child	-	子组件

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Container(
        margin: const EdgeInsets.only(top: 50.0, left: 120.0),
        // 卡片大小约束
        constraints: const BoxConstraints.tightFor(width: 200.0, height: 150.0),
        // 装饰
        decoration: const BoxDecoration(
          // 背景装饰
          gradient: RadialGradient(
            // 背景径向渐变
            colors: [Colors.red, Colors.orange],
            center: Alignment.topLeft,
            radius: .98,
          ),
          boxShadow: [
            // 卡片阴影
            BoxShadow(
              color: Colors.black54,
              offset: Offset(2.0, 2.0),
              blurRadius: 4.0,
            )
          ],
        ),
        // 卡片倾斜变换
        transform: Matrix4.rotationZ(.2),
        // 卡片内文字居中
        alignment: Alignment.center,
        child: const Text(
          // 卡片文字
          "Hello World!", style: TextStyle(color: Colors.white, fontSize: 28.0),
        ),
      ));
}

5. 剪裁类组件

Flutter中提供了一些剪裁组件，用于对组件进行剪裁。（类似CSS里的overflow）

属性	描述
CliOval	子组件为正方形时剪裁成内贴圆形；为矩形时，剪裁成内贴椭圆
ClipRRect	将子组件剪裁为圆角矩形
ClipRect	默认剪裁掉子组件布局空间之外的绘制内容（溢出部分剪裁）
ClipPath	按照自定义的路径剪裁

Widget avatar = Image.asset('static/portrait.png', width: 120.0);

@override
Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Container(
        margin: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            // 原图不剪裁
            avatar,
            // 剪裁为圆形
            ClipOval(child: avatar),
            // 剪裁为圆角矩形
            ClipRRect(
                borderRadius: BorderRadius.circular(5.0), child: avatar),
            Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  ClipRect(
                    // 将溢出部分剪裁
                    child: Align(
                      alignment: Alignment.topLeft,
                      // 宽度设为原来宽度一半
                      widthFactor: .5,
                      child: avatar,
                    ),
                  ),
                  const Text("Hello!", style: TextStyle(color: Colors.green))
                ])
          ],
        ),
      ));
}

• 自定义裁剪

图片所占用的空间大小仍然不变 这是因为组件大小是是在layout阶段确定的，而剪裁是在之后的绘制阶段进行的

class MyClipper extends CustomClipper<Rect> {
  // 用于获取剪裁区域 由于图片大小是120x120 我们返回剪裁区域为图片右上侧60像素的范围
  @override
  Rect getClip(Size size) => Rect.fromLTWH(60.0, 0.0, 60.0, 60.0);

  // 是否重新剪裁 剪裁区域始终不会发生变化时应该返回false 否则返回true
  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
}

class AboutPageState extends State<AboutPage> {
  final title = 'About Page';

  Widget avatar = Image.asset('static/portrait.png', width: 120.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        ),
        body: Container(
          margin: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              // 原图不剪裁
              avatar,
              // 
              ClipRect(
                  clipper: MyClipper(), //使用自定义的clipper
                  child: avatar
              )
            ],
          ),
        ));
  }
}

6. 空间适配

根据Flutter 的布局协议，父组件会将自身的最大显示空间作为约束传递给子组件，子组件应该遵守父组件的约束，如果子组件原始大小超过了父组件的约束区域，则需要进行一些缩小、裁剪或其他处理，如果不经过处理的话 Flutter 中就会显示一个溢出警告并在控制台打印错误日志。为了方便开发者自定义适配规则，Flutter 提供了一个 FittedBox 组件。

• 适配原理
  • FittedBox 在布局子组件时会忽略其父组件传递的约束，可以允许子组件无限大，即FittedBox 传递给子组件的约束为（0<=width<=double.infinity, 0<= height <=double.infinity）
  • FittedBox 对子组件布局结束后就可以获得子组件真实的大小。
  • FittedBox 知道子组件的真实大小也知道他父组件的约束，那么FittedBox 就可以通过指定的适配方式（BoxFit 枚举中指定），让起子组件在 FittedBox 父组件的约束范围内按照指定的方式显示

如下代码，因为父Container要比子Container小，然后子Container的模式是等比缩放，因为子组件的长宽并不相同，缩放后，露出了父组件的颜色：

Widget build(BuildContext context) {
  return Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Container(
        margin: const EdgeInsets.all(16.0),
        width: 90.0,
        height: 90.0,
        color: Colors.green,
        child: FittedBox(
          fit: BoxFit.contain,
          child: Container(
            width: 100.0,
            height: 80.0,
            color: Colors.black,
          ),
        ),
      ));
}

7. 页面脚手架

一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部 Tab 导航菜单等。Scaffold 是一个路由页的骨架，我们使用它可以很容易地拼装出一个完整的页面。

组件名	解释
AppBar	导航栏骨架
MyDrawer	抽屉菜单
BottomNavigationBar	底部导航栏
FloatingActionButton	漂浮按钮

• 一个带抽屉和Tabbar的页面框架例子：

// 抽屉类
class MyDrawer extends StatelessWidget {
  const MyDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: MediaQuery.removePadding(
        context: context,
        // 移除抽屉菜单顶部默认留白
        removeTop: true,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 38.0),
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    child: ClipOval(
                      child: Image.asset(
                        "static/portrait.png",
                        width: 80,
                      ),
                    ),
                  ),
                  const Text(
                    "Hello",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )
                ],
              ),
            ),
            Expanded(
              child: ListView(
                children: const [
                  ListTile(
                    leading: Icon(Icons.add),
                    title: Text('添加内容'),
                  ),
                  ListTile(
                    leading: Icon(Icons.settings),
                    title: Text('管理账号'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 页面
class MyMainPageState extends State<MyMainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 头部
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
        actions: [IconButton(onPressed: () {}, icon: const Icon(Icons.share))],
        leading: Builder(builder: (context) {
          return IconButton(
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
              icon: const Icon(Icons.add));
        }),
      ),
      // 身体
      body: Center(
        child: Image.asset('static/portrait.png', width: 240.0),
      ),
      // 抽屉
      drawer: const MyDrawer(),
      // Tabbar
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          BottomNavigationBarItem(
              icon: Icon(Icons.business), label: '办公'),
          BottomNavigationBarItem(icon: Icon(Icons.school), label: '学习')
        ],
        // 切换事件 索引从0开始
        onTap: (int type) {
          debugPrint(type.toString());
        },
      ),
      // 悬浮按钮
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: Colors.green,
        child: const Icon(Icons.add),
      ),
    );
  }
}

---

本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

往期文章

• 手把手教你搭建规范的团队vue项目，包含commitlint，eslint，prettier，husky，commitizen等等
• Web Woeker和Shared Worker的使用以及案例
• Vue2全家桶+Element搭建的PC端在线音乐网站
• vue3+element-plus配置cdn
• 助你上手Vue3全家桶之Vue3教程
• 助你上手Vue3全家桶之VueX4教程
• 助你上手Vue3全家桶之Vue-Router4教程
• 超详细！Vue的九种通信方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 超详细！Vue-Router手把手教程

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金