이미지의 1/3이 전체 화면을 차지하게하는 방법

나는 여러 개의 화면으로 자르고 표시하고자하는 이미지가 있습니다. 나는 이미지의 1 thrid가 전체 화면을 차지하고 싶습니다.이미지의 1/3이 전체 화면을 차지하게하는 방법

Widget buildBGImage(String imageName) { 
    return new Container(
     decoration: new BoxDecoration(border: new Border.all()), 
     constraints: new BoxConstraints.expand(), 
    child: new SizedBox.expand(
     child: new ClipRect(
      clipper: new WidthClipper(currentPage), 
      child: new Image.asset(
       "assets/images/$imageName", 
       fit: ImageFit.fill) 
    ) 
), 
);

}

class WidthClipper extends CustomClipper<Rect> { 
    int section; 

    WidthClipper(this.section); 

    @override 
    Rect getClip(Size size) { 
    return new Rect.fromLTWH(
     size.width * (section/3), 0.0, size.width/3, size.height); 
    } 

    @override 
    bool shouldReclip(WidthClipper oldClipper) => true; 
}

을하지만 난하는 방법에 대한 은행 그리기 오전 :

지금까지 나는 함께 화면의 1/3을 차지하기 위해 이미지의 1/3를 얻을 수 있습니다 1/3이 전체 화면을 차지하게하십시오.

출처

2017-03-07 Mark

이미지 데이터를 전체 화면에 맞추는 방법에 대해 더 이상 질문하지 않습니까? Image? 또한 원래 이미지의 3 분의 1의 종횡비가 전체 화면의 종횡비에 맞지 않으면 어떻게 될까요?

이, 예를 들면, 디스플레이 전체 화면 세로 모드에서 가로 화상의 대략적 중심 셋째

new Image.network(
    "https://upload.wikimedia.org/wikipedia/commons/5/5a/Monument_Valley_2.jpg", 
    fit: ImageFit.fitHeight, 
    alignment: FractionalOffset.center, 
)

동안 alignment: FractionalOffset.centerLeft 및 alignment: FractionalOffset.centerRight 디스플레이 (대략) 왼쪽 각각 제 오른쪽.

출처

2017-03-07 09:58:39

나는 이것이 효과가있을 것이라고 생각한다. 내 문제는 지금이 방법을 페이지 뷰와 함께 사용하면 페이지 전체에서 원활하지 않다는 것입니다. – Mark

@Mark 나는 Flutter에도 매우 익숙하다. 그래서 진행 방법을 확신 할 수 없다. 소스 이미지가 3 분의 1로 완전히 분할되어 전체 화면에 맞지 않는 경우 어떻게 처리 할 수 있을까? 더 많거나 적은 3 페이지를 사용하십니까? 처음과 마지막 페이지에 왼쪽과 오른쪽 패딩을 추가 하시겠습니까? –

이미지의 1/3이 전체 화면을 차지하게하는 방법

답변

관련 문제