使用 Align 时自定义剪裁器不移动

Posted 2023-05-07

【中文标题】使用 Align 时自定义剪裁器不移动

【英文标题】：Custom clipper not moving when I use Align

【发布时间】：2021-05-28 19:04:58

【问题描述】：

我正在创建一个页面上包含 5-6 个多边形的 UI。我插入了其中的 2 个。但是当我尝试使用 Align() 移动它们时，它根本没有移动。这是我的代码：

import 'package:flutter/material.dart';
import 'package:online_schedule/bottomRightCorner.dart';
// import 'package:online_schedule/clipShadowPath.dart';

import 'bottomRightCorner.dart';
import 'middle.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    // final _width = MediaQuery.of(context).size.width;
    return Material(
      child: Stack(
        children: [
          Align(
            alignment: Alignment(1, 1),
            child: ClipPath(
              clipper: Middle(),
              child: Container(color: Colors.grey),
            ),
          ),
          Align(
            alignment: Alignment(-1, -1),
            child: ClipPath(
              clipper: BottomRightCorner(),
              child: Container(color: Colors.grey),
            ),
          )
        ],
      ),
    );
  

忘记我提到的坐标，它们只是为了测试。 what I got

上图是我的代码的结果

但我的目标是变成这样 what I need

我为此花了 3 天时间，但仍然搞砸了。帮帮我

【参考方案1】：

在对齐中添加这一行

import 'package:flutter/material.dart';
import 'package:online_schedule/bottomRightCorner.dart';
// import 'package:online_schedule/clipShadowPath.dart';

import 'bottomRightCorner.dart';
import 'middle.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    // final _width = MediaQuery.of(context).size.width;
    return Material(
      child: Stack(
        children: [
          Align(
           alignment: FractionalOffset.bottomCenter,
            //alignment: Alignment(1, 1),
            child: ClipPath(
              clipper: Middle(),
              child: Container(color: Colors.grey),
            ),
          ),
          Align(
            alignment: FractionalOffset.bottomCenter,
           // alignment: Alignment(-1, -1),
            child: ClipPath(
              clipper: BottomRightCorner(),
              child: Container(color: Colors.grey),
            ),
          )
        ],
      ),
    );
  

【讨论】：

即使我尝试这种方法也无法正常工作