Flutter 커팅 구성 요소 사용

효과 전시
실제 프로젝트 에서 우 리 는 다음 과 같은 여러 가지 커팅 모양 의 효 과 를 자주 볼 수 있 습 니 다.Flutter 는 우리 에 게 매우 편리 한 Widget 을 제공 하여 쉽게 실현 할 수 있 습 니 다.다음은 우리 가 한번 봅 시다.

편집 위 젯
ClipRRRect(사각형 커팅)

여기 서 우 리 는 borderRadius 속성 을 통 해 원 각 반경 을 편리 하 게 설정 하여 원 각 커팅 을 실현 할 수 있다

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image.network(
    img1,
    height: height,
  ),
),

기타 속성
대충 한 번 보면 ClipRRRect 의 속성 을 볼 수 있 습 니 다.5 개 입 니 다.여기 서 우리 가 조정 해 야 할 가능성 은 1~3 개 입 니 다.

borderRadius 원 각 반경
클립 퍼 사용자 정의 원 각 사각형 커팅클립 Behavior 커팅 방식
Clip.none 은 편집 하지 않 습 니 다클립.hardEdge 는 톱날 커팅 을 하지 않 습 니 다클립.antiAlias 기본 값-톱날 커팅 저항

Clip.antiAlias Withsave Layer 톱날 저항 및 합성 층 커팅(이 모드 는 톱날 저항 이 있 을 뿐만 아니 라 스크린 캐 시 를 분배 합 니 다.후속 커팅 은 버퍼 에서 진 행 됩 니 다)

다른 모양 편집
여기 서 우 리 는 네 개의 뿔 을 설정 한 borderRadius 를 통 해 서로 다른 모양 효 과 를 얻 을 수 있 습 니 다.다음은 구체 적 으로 살 펴 보 겠 습 니 다.
잎 모양

ClipRRect(
  borderRadius: BorderRadius.only(
    //          40
    bottomLeft: Radius.circular(40),
    //          40
    topRight: Radius.circular(40),
  ),
  child: ...,
),

'개집'모양.

ClipRRect(
  borderRadius: BorderRadius.vertical(
    //         40
    top: Radius.circular(40),
    //         10
    bottom: Radius.circular(10),
  ),
  child: ...,
),

더 많은 창의 적 인 효 과 를 네가 발휘 할 때 까지 기 다 려 라.
ClipOval(타원 커팅)

만약 당신 의 하위 구성 요소 가 직사각형 이 라면,재단 하면 타원형 입 니 다.

ClipOval(
  child: Image.network(
    img1,
    //       ，        
    height: height,
  ),
),

만약 당신 의 하위 구성 요소 가 정사각형 이 라면,재단 하면 원형 입 니 다.

//        
var width = 100.0;
var height = 100.0;

ClipOval(
  child: Image.network(
    img1,
    width: width,
    height: height,
    //   
    fit: BoxFit.cover,
  ),
),

기타 속성
여 기 는 clipper,clipBehavior 만 있 습 니 다.위의 ClipRRRect 의 속성 의미 와 같 지만 더 설명 하 겠 습 니 다.

ClipRect(사각형 커팅)
이것 은 거의 사용 되 지 않 습 니 다.잠시 응용 장면 을 찾 지 못 했 습 니 다.설명 을 많이 했 을 뿐 입 니 다.찾 으 면 댓 글 을 달 아 주세요.제 가 바로 업데이트 하 겠 습 니 다.
ClipPath(경로 편집)
이것 은 당신 이 발휘 하 는 자유도 가 더욱 많아 집 니 다.예 를 들 면.⭐오각별❤️하트,쿠폰 카드 및 위👆🏻모든 모양 은 경로 로 자 를 수 있 습 니 다.아래 에 서 는 아래쪽 곡선 을 자 르 는 효 과 를 실현 합 니 다.

ClipPath(
  //       clipper      CustomClipper<Path> 
  clipper: ClipperPath(),
  child: Image.network(
    img1,
    height: height,
  ),
),

여 기 는 곡선 커팅 경 로 를 만 드 는 것 입 니 다.아래 코드 를 보면 위의 다른 커팅 Widget 의 clipper 를 어떻게 사용 하 는 지 알 수 있 습 니 다.
아래 코드 주석 은 매우 상세 합 니 다.자세히 보 세 요.

///       
class ClipperPath extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    //         3/4 
    path.lineTo(0.0, size.height / 2);
    //       
    var firstControlPoint = Offset(0, size.height);
    //          
    var firstPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);
    //       
    var secondControlPoint = Offset(size.width, size.height);
    //         3/4  
    var secondPoint = Offset(size.width, size.height / 2);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);
    //       
    path.lineTo(size.width, 0.0);
    //   
    path.close();
    //       
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) =>
      oldClipper.hashCode != this.hashCode;
}

Tips:커팅 경로 의 비용 이 많이 듭 니 다.어떤 모양 에 대해 서 는 위 에서 최적화 된 Widget 을 선택 하여 사용 하 는 것 을 권장 합 니 다.
최적화 하 다
똑똑 한 당신 은 우리 가 ClipRRRect 를 통 해 이 효 과 를 실현 할 수 있다 는 것 을 알 게 될 것 입 니 다.왜 이렇게 많은 코드 를 써 야 합 니까?자,효과 봐,코드 올 려.

ClipRRect(
  borderRadius: BorderRadius.vertical(
    //           60
    bottom: Radius.circular(60),
  ),
  child: Image.network(
    img1,
    height: height,
  ),
),

원본 창고
Flutter 기반🔥 최신 버 전
Flutter Widgets 창고
참조 링크
ClipRRect (Flutter Widget of the Week)
Flutter-ClipRRect
Flutter-ClipRect
Flutter-ClipOval
Flutter-ClipPath
Flutter-CustomClipper
이상 은 Flutter 커팅 구성 요소 의 사용 에 대한 상세 한 내용 입 니 다.Flutter 커팅 구성 요소 에 대한 자 료 는 다른 관련 글 을 주목 하 십시오!