时间戳

首页 > 解决方案 > 如何在 z 方向上赋予小部件厚度？

flutter - 如何在 z 方向上赋予小部件厚度？

问题描述

我实现了我在这篇中等文章https://medium.com/flutter/perspective-on-flutter-6f832f4d912e 中找到的效果，它允许您在 3d 空间中旋转小部件。我唯一的问题是我所有的小部件在 z 方向上似乎没有厚度，所以会发生这样难看的事情：

应用截图

我未旋转的徽标如下所示：

原始标志

这是我用来创建这种旋转效果的代码：

import 'package:flutter/material.dart';

class PerspectiveContainer extends StatefulWidget {
  final Widget child;
  PerspectiveContainer({Key key, @required this.child}) : super(key: key);

  @override
  _PerspectiveState createState() => _PerspectiveState();
}

class _PerspectiveState extends State<PerspectiveContainer> {
  Offset _offset = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return Transform(
      transform: Matrix4.identity()
        ..setEntry(3, 2, 0.001) // perspective
        ..rotateX(0.004 * _offset.dy)
        ..rotateY(-0.004 * _offset.dx),
      alignment: FractionalOffset.center,
      child: GestureDetector(
        onPanUpdate: (details) => setState(() => _offset += details.delta),
        onDoubleTap: () => setState(() => _offset = Offset.zero),
        child: widget.child,
      ),
    );
  }
}

那么是否可以在 z 方向上赋予我的 BINGO 小部件厚度？（宾果徽标是用 Table 小部件制作的）

标签： flutterflutter-layout

解决方案

Material Design 有时在这里使用阴影和高程，这会给你一些 3D 外观，尽管它实际上是 2d。https://material.io/design/environment/elevation.html#elevation-in-material-design

Flutter 中的一些 Widget 有一个elevation属性，例如Card.

推荐阅读