flutter--页面布局（Transform、Baseline、Wrap、Offstage）

最新推荐文章于 2024-05-28 22:32:56 发布

Bingfen�

最新推荐文章于 2024-05-28 22:32:56 发布

阅读量502

点赞数 1

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/weixin_43846755/article/details/109011480

版权

本文介绍了Flutter中的四个关键布局组件：Transform用于矩阵转换，实现平移、旋转和缩放；Baseline确保元素底部对齐；Wrap提供自动换行布局；Offstage则控制组件的可见性。通过示例代码和属性解析，详细阐述了这些组件的使用场景和功能。

摘要由CSDN通过智能技术生成

flutter–页面布局（Transform、Baseline、Wrap、Offstage）

Transform(矩阵转换)

作用：做矩形变换-------可以对它的child做平移、旋转、缩放等操作

主要属性表：

属性名	类型	说明
transform	Matrix4	一个4*4矩阵。
origin	Øffset	旋转点，相对于左上角顶点的偏移。默认的旋转点是左上角的顶点
alignment	AlignmentGeometry	对齐方式
trandformHitTests	Bool	点击区域是否也会做出相应的改变

例子：

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/table.dart';
import 'package:flutter_app/transform.dart';
import 'gridView.dart';
import 'list.dart';
void main(){
  runApp(
    // new MaterialApp(
    //   title: "ListΩView布局示例",
    //   home: new MyApp(),
    // )
    //   new MaterialApp(
    //     title: "GridView九宫格示例",
    //     home: new MyAppGrid(),
    //   )
    //new MaterialApp(
  //   title: "Table示例",
  //   home: new MyAppTable(),
  // )
    new MaterialApp(
      title: 'Transform矩阵转换示例',
      home: new LayoutDemo(),
    )

  );
}

transform.dart

import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Transform矩阵转换示例'),
      ),
      body: new Center(
        child: Container(
            color:Colors.grey,
          child:Transform(
            // 对齐方式为右上角
            alignment: Alignment.topRight,
            // 用Matrix4.rotationZ(0.3)的方式，旋转一定的角度---绕Z轴旋转
            transform: Matrix4.rotationZ(0.3),
            child: Container(
              padding: const EdgeInsets.all(8.0),
              color: const Color(0xFFE8581C),
              child: const Text('Transform矩阵转换'),
            ),
          )
        ),
      ),
    );
  }
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KxNJCSWu-1602397012844)(/Users/bf/Library/Application Support/typora-user-images/image-20201011102252027.png)]

更多关于Matrix4矩形的变换可以参考链接：https://juejin.im/post/6844903709470621710

Baseline(基准线布局)

作用：将所有元素底部放在同一个水平线上。

它会根据child的baseline来调整child的位置，是一个很基础的组件。

如果两个字号不一样的文字，希望底部在一条水平线上，就可以使用这个组件。

属性表：

属性名	类型	说明
baseline	double	这个数值是从顶部开始算起的。必须要有
baselineType	TestBaseline	baseline类型，也是必须要有的，目前有两种类型。alphabetic对齐字符底部的水平线；ideographic对齐表意字符的水平线。