如何在颤动中剪辑定位小部件的角答案

【问题标题】：How to clip the corners of Positioned widget in flutter如何在颤动中剪辑定位小部件的角
【发布时间】：2021-07-20 04:27:01
【问题描述】：

这是我得到的输出：

我想用灰色 Container 的圆角剪裁角落上的绿色 Positioned 小部件。任何帮助将不胜感激。

我当前的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CustomCard(
          title: 'Custom Card', percentage: 50.0, color: Colors.green),
    );
  }
}

class CustomCard extends StatelessWidget {
  final String title;
  final double percentage;
  final Color color;
  CustomCard(
      {required this.title, required this.percentage, required this.color});
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Stack(clipBehavior: Clip.antiAliasWithSaveLayer, children: [
          Container(
            height: 100.0,
            width: width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.grey,
            ),
          ),
          Positioned(
            left: -(percentage / 100) * width,
            top: -(percentage / 100) * width,
            child: Container(
              height: (percentage / 100) * width * 2,
              width: (percentage / 100) * width * 2,
              decoration: BoxDecoration(
                borderRadius:
                    BorderRadius.circular(((percentage / 100) * width)),
                color: color,
              ),
            ),
          ),
        ]),
      ),
    );
  }
}

谢谢。

【问题讨论】：

你不能那样做，但是不要使用Stack，而是使用Container（灰色）和clipBehavior，它会夹住孩子Container（绿色）
我试过了。不工作。可能是我做错了什么。
@KetanRamteke 您可以将您的Stack 包裹在ClipRRect 中，然后将ClipRRect 的borderRadius 设置为10
@pskink 我得到这个输出：imgur.com/a/5eJbY3J
感谢 pskink 的帮助，@TheAlphamerc 解决了这个问题。非常感谢您的帮助:)

标签： flutter flutter-layout flutter-positioned

【解决方案1】：

@Ketan 如果您使用 `ClipRRect1 小部件包装 Stack 并为其提供边框半径，那么它将为绿色和灰色区域添加边框。


class CustomCard extends StatelessWidget {
  final String title;
  final double percentage;
  final Color color;
  CustomCard({this.title, this.percentage, this.color});
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Stack(clipBehavior: Clip.antiAliasWithSaveLayer, children: [
              Container(
                height: 100.0,
                width: width,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.grey,
                ),
              ),
              Positioned(
                left: -(percentage / 100) * width,
                top: -(percentage / 100) * width,
                child: Container(
                  height: (percentage / 100) * width * 2,
                  width: (percentage / 100) * width * 2,
                  decoration: BoxDecoration(
                    borderRadius:
                        BorderRadius.circular(((percentage / 100) * width)),
                    color: color,
                  ),
                ),
              ),
            ]),
          )),
    );
  }
}

【讨论】：

【解决方案2】：

你可以使用 ClipRRect 来实现，检查代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CustomCard(
          title: 'Custom Card', percentage: 50.0, color: Colors.green),
    );
  }
}

class CustomCard extends StatelessWidget {
  final String title;
  final double percentage;
  final Color color;
  CustomCard(
      {required this.title, required this.percentage, required this.color});
  
  Widget positionedWidget(double width){
   return Stack(clipBehavior: Clip.antiAliasWithSaveLayer, children: [
          Container(
            height: 100.0,
            width: width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.grey,
            ),
          ),
          Positioned(
            left: -(percentage / 100) * width,
            top: -(percentage / 100) * width,
            child: Container(
              height: (percentage / 100) * width * 2,
              width: (percentage / 100) * width * 2,
              decoration: BoxDecoration(
               
                color: color,
              ),
            ),
          ),
        ]
      );
    
  }
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Padding(padding: EdgeInsets.all(10), child: ClipRRect(borderRadius:  BorderRadius.circular(30),
      child: positionedWidget(width))));
  }
}

【讨论】：

感谢 Mohan 的回答，它有点用，但我希望能像父灰色容器一样获得更平滑的圆形边缘。
你可以通过调整边框半径来做到这一点
@KetanRamteke 答案已更新
是的，看起来很棒，但是正如 TheAlphamerc 之前回答的正确答案，我不得不接受他的回答。虽然赞成 :) 再次，非常感谢。

【解决方案3】：

class CustomCard extends StatelessWidget {
  final String title;
  final double percentage;
  final Color color;
  CustomCard(
      {required this.title, required this.percentage, required this.color});
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10),
          child: Stack(children: [
            Container(
              height: 100.0,
              width: width,
              color: Colors.grey,
            ),
            Positioned(
              left: -(percentage / 100) * width,
              top: -(percentage / 100) * width,
              child: Container(
                height: (percentage / 100) * width * 2,
                width: (percentage / 100) * width * 2,
                color: color,
              ),
            ),
          ]),
        ),
      ),
    );
  }
}

【讨论】：