Question

我想在右上角放置一个要四舍五入的enter image description here图片。我已经尝试过对齐，但是没有用。有什么建议吗？

这是我到目前为止所做的：

import 'package:flutter/material.dart';


class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(title: Text("Login"),),

      body: CircleImage(),
    );
  }
}



class CircleImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      child: Image.asset("images/login_img.png", alignment: Alignment(1.0, 1.0),),
      clipper: CircleClipper(),
    );
  }
}




class CircleClipper extends CustomClipper<Path>{

  @override
  getClip(Size size) {

    var path = Path();

    path.addOval(new Rect.fromCircle(center: new Offset(size.width/2, size.height/2), radius: size.width * 0.45));

    return Path();
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }

}

这是我想要实现的：

image

Answer 1

使用此代码可获得预期的结果。

          class CornerCircle extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
        return new Container(
          width: 200.0,
          height: 200.0,
          child: new Stack(
            alignment: Alignment.center,
            children: <Widget>[
            new Container(
              margin: EdgeInsets.all(25.0),
              decoration: new BoxDecoration(
                gradient: LinearGradient(colors: [Colors.yellow[700], Colors.redAccent],
                begin: Alignment.topRight, end: Alignment.bottomLeft),
                border: Border.all(color: Colors.red,width: 2.0)
              ),
            ),
            new Align(alignment: Alignment.topRight,
            child: new Container(
              width: 50.0,
              height: 50.0,
              decoration: BoxDecoration(
                color: Colors.red,
                shape: BoxShape.circle
              ),
              alignment: Alignment.center,
              child: new Text('50', style: new TextStyle(color: Colors.white, fontWeight: FontWeight.bold),),
            ),)
          ],),
        );
       }
      }

Answer 2

您可以将ClipPath包装在Container和Align小部件中

  @override
    Widget build(BuildContext context) {
      return Container(
        child: Align(
          alignment: Alignment.topRight,
          child: ClipPath(
            child: Image.asset(
              "images/login_img.png",
              height: 80.0,
              width: 80.0,
            ),
            clipper: CircleClipper(),
          ),
        ),
      );
    }

并修复您的getClip方法，您将返回一个新的Path（）而不是创建的路径

    @override
    getClip(Size size) {

      var path = Path();

      path.addOval(new Rect.fromCircle(center: new Offset(size.width/2, size.height/2), radius: size.width * 0.45));

      return path;
    }

颤振：将圆形图像放在角落

2 个答案: