떨림 장식 배경 설정 (프레임 등, 둥근, 음영, 성형, 구배, 배경 이미지)

1 관계를 계속 :

BoxDecoration는 : 배경 화상 프레임 라운딩, 음영, 성형, 구배를 구현

ShapeDecoration 네 변을 각 지정 색 및 폭을 각각 하단 라인 가장자리 색 사각형, 원형 가장자리 색 경기장 (수직 타원)를 달성하기 위해 (여덟 개 모서리) 측 컬러

FlutterLogoDecoration : 떨림 사진을 달성

UnderlineTabindicator : 밑줄

도 2는 설명
안드로이드 shape.xml 각종 커스텀 배경 (테두리 라운딩, 음영, 성형, 구배, 배경 화상)에 대응하는 장식 배경 오브젝트.

3 BoxDecoration 예 :
생성자 :

  BoxDecoration의 CONST ({ 
    this.color, // 배경 
    this.image, // 사진 
    this.border, 가장자리 색상 
    this.borderRadius, // 라운드 각도 
    this.boxShadow, // 그림자 
    this.gradient, // 그라데이션 
    this.backgroundBlendMode // 믹싱 모드 
    this.shape = BoxShape.rectangle 모양 @ 
  })

테두리 + 3.1 등심 :

장식 : 새로운 새 BoxDecoration ( 
  테두리 : 새로운 새 Border.all (색상 : 컬러 (0xFFFF0000), 폭 : 0.5), 컬러 엣지 측 폭 // 
  색상 : 컬러 (0xFF9E9E9E) 배경 // 
  // borderRadius : 새로운 BorderRadius.circular ((20.0)) // 라운드 각도 
  borderRadius : 새로운 BorderRadius.vertical (상부 : Radius.elliptical (20, 50)) // 필렛의 크기를 제어 할 수있는 측면 
)

3.2 그림자 :

장식 : 새로운 새 BoxDecoration ( 
테두리 : 새로운 새 Border.all (색상 : 컬러 (0xFFFF0000), 폭 : 0.5), 컬러 엣지 측 폭 // 
// 그림자 개의 층, 녹색, 하나는 황색, 오프셋 그림자의 위치를 생성 할 결정 층의 그림자 흐림 (투명 더욱 미만성 대형) blurRadius는 spreadRadius 흐림 그림자의 크기에 따라 결정의 크기에 의해 결정 
, 10.0 : blurRadius (5.0, 5.0) : 오프셋 boxShadow [BoxShadow (색상 : 컬러 (0x99FFFF00)는, 오프셋 spreadRadius : 2.0) BoxShadow (색상 : 컬러 (0x9900FF00)는, 오프셋 : 오프셋 (1.0, 1.0)) BoxShadow (색상 : 컬러 (0xff0000ff))] 
),

3.3 형상 (원형 및 직사각형) :

장식 : 새로운 새 BoxDecoration ( 
  테두리 : 새로운 새 Border.all (색상 : 컬러 (0xFFFFFF00), 폭 : 0.5), 컬러 엣지 측 폭 // 
  색상 : 컬러 (0xFF9E9E9E) 배경 // 
  // 형상 : BoxShape.circle, 원형 borderRadius의 사용시 // 원형, 사용할 수없는 
  도형 : BoxShape.rectangle을 // 기본 직사각형 
  borderRadius : 새로운 BorderRadius.circular ((20.0) ) // 라운드 각도 
)

3.4 구배 (환형 주사 선형)

장식 : 새로운 새 BoxDecoration ( 
  테두리 : 새로운 새 Border.all (색상 : 컬러 (0xFFFFFF00), 폭 : 0.5), 컬러 엣지 측 폭 // 
// 환형 렌더링 
  기울기 : RadialGradient는 (색상 : 색상 (0xFFFFFF00), 컬러 (0xFF00FF00 ), 컬러 (0xFF00FFFF), RADIUS :. 1 TILEMODE : TileMode.mirror) 
// 구배 주사 
// 기울기 : SweepGradient (색상 : 컬러 (0xFFFFFF00), 컬러 (0xFF00FF00), 컬러 (0xFF00FFFF)] startAngle로부터 : 0.0 endAngle :. 3.14 * 1) 
// 선형 구배 
// 기울기 :이 LinearGradient (색상 : 컬러 (0xFFFFFF00), 컬러 (0xFF00FF00)는, 컬러 (0xFF00FFFF)는, 시작 : FractionalOffset (1, 0), 단부 : FractionalOffset ( 0, 1)) 
)

3.4 배경 이미지 :

장식 : 새로운 새로운 BoxDecoration ( 
  경계 : 새로운 새로운 Border.all (컬러 : 컬러 (0xFFFFFF00), 폭 : 0.5), 색상 및 모서리 측면 폭 // 
  이미지 : 새로운 새로운 DecorationImage ( 
  이미지 : 새로운 새로운 NetworkImage ( 'HTTPS : //avatar.csdn. / 8/9 / A / 순 3_chenlove1.jpg '), // 네트워크 그래픽 
  // 이미지 : 새로운 assetImage ('그래픽 / background.png '), 지역 이미지 
  에 맞게 : BoxFit.fill // 채우기 
  // centerSlice : 새로운 Rect.fromLTRB (270.0, 180.0, 1360.0, 730.0), // 고정 크기 
  ) 
),

4 ShapeDecoration 예 :
생성자 :

CONST ShapeDecoration ({ 
  this.color, 
  this.image, 
  this.gradient, 
  this.shadows는 
  , this.shape을 @Required 
})

다른 BoxDecoration과 일치하는 모양뿐만 아니라, 연구 모양 :

장식 : 새로운 새로운 ShapeDecoration ( 
  색상 : // 컬러 (0xFFFF00FF), 배경 
  네 가지 측면에서의 // 균일 한 색상과 폭 
  Border.all (색상 : 모양 색상 (0xFF00FFFF), 스타일 : BorderStyle.solid, 폭 : 2) 
// 네 에지 컬러와 폭을 지정하는 경우에만 바닥 일관된 결과 UnderlineInputBorder 
// 형태 : 테두리 (왼쪽 B, : 위쪽 : B, 하단 : B, 오른쪽 B) 
// 결론 
// 형상 : UnderlineInputBorder (borderSide : BorderSide (색상 : 색상 (0xFFFFFFFF로), 스타일 : BorderStyle.solid, 폭 : 2)) 
// 사각형 색 측 
// 형상 : RoundedRectangleBorder (borderRadius : BorderRadius.all (Radius.circular (10)) 측 : BorderSide (컬러 : 컬러 (0xFFFFFFFF로), 스타일 : BorderStyle.solid, 폭 : 2)) 
// 색 둥근 모서리
// 형상 : CircleBorder (면 : BorderSide (색상 : 컬러 (0xFFFFFF00) 스타일 : BorderStyle.solid, 폭 : 2))
//体育场(竖向椭圆) 
// 형상 : StadiumBorder (면 : BorderSide (폭 : 2 스타일 : BorderStyle.solid : 컬러, 컬러 (0xFF00FFFF)) 
//角形(八边角)边色
// 형상 : BeveledRectangleBorder (borderRadius : BorderRadius.all (Radius.circular (10)) 측 : BorderSide (색상 : 컬러 (0xFFFFFFFF로), 스타일 : BorderStyle.solid 폭 : 2)) 
),

예를 들면 5 FlutterLogoDecoration :
생성자 :

CONST FlutterLogoDecoration ({ 
  this.lightColor = 컬러 (0xFF42A5F5) CONST // Colors.blue [400] 
  this.darkColor = 컬러 (0xFF0D47A1) CONST // Colors.blue [900] 
  this.textColor = 컬러 (0xFF616161 CONST) 
  this.style = FlutterLogoStyle.markOnly, 
  this.margin = EdgeInsets.zero, 
})

이 해결되지, 떨림의 로고 개발, 쓸데!

6 UnderlineTabindicator 예 :
생성자 :

CONST UnderlineTabIndicator ({ 
  this.borderSide = CONST BorderSide (폭 : 2.0 : 컬러 Colors.white) 
  this.insets = EdgeInsets.zero, 
})

이것은 비교적 간단한, 인 세트 값이 설정 될 수있다 강조된다 (밑줄 높은 기판 제어 좌우 마진)

장식 : 새로운 UnderlineTabIndicator ( 
  borderSide : BorderSide (폭 : 2.0, 컬러 : Colors.white) 
  세트 : EdgeInsets.fromLTRB (0,0,0,10) 
),

혼자 설정 왼쪽 테두리 문구

컨테이너 ( 
	장식 : BoxDecoration ( 
	   테두리 : 테두리 ( 
	       좌 : BorderSide ( 
	     	 폭 : 0.5 // 폭 
		     색상 : Colors.red // 테두리 색 
		   ) 
	 	 ) 
	 ) 
)

면책 조항 : 이 문서에서는 CSDN 블로거 "첸 잉이있다"입니다

떨림 장식 배경 설정 (프레임 등, 둥근, 음영, 성형, 구배, 배경 이미지)

추천