Flutter 모방 위 챗 결제 인터페이스
왼쪽 은 위 챗 결제 인터페이스 이 고 오른쪽 은 개발 완료 후의 효과 이 며 아이콘 은 iconform 에서 다운로드 합 니 다.먼저 이 편 에 관련 된 구성 요 소 를 소개 합 니 다.
장식 효과 가 있 는 컨테이너
실제 과정 에서 우 리 는 원 각,배경 색 등 추가 적 인 스타일 이 필요 한 용 기 를 자주 만 날 수 있다.Flutter 에 서 는 각종 용기 에 하나의 decoration 속성 이 있어 용 기 를 장식 할 수 있 습 니 다.전형 적 인 용법 은 배경 색,원 각,테두리 와 그림자 등 을 설정 하 는데 그 중에서 배경 색 은 그 라 데 이 션 색 을 사용 할 수 있다.decoration 은 장식 대상 으로 가장 많이 사용 되 는 것 은 BoxDecoration 입 니 다.BoxDecoration 의 속성 은 다음 과 같 습 니 다.
const BoxDecoration({
this.color,
this.image,
this.border,
this.borderRadius,
this.boxShadow,
this.gradient,
this.backgroundBlendMode,
this.shape = BoxShape.rectangle,
})
return Container(
//......
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4.0),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF56AF6D),
Color(0xFF56AA6D),
]),
),
//...
);
Row 줄 레이아웃 과 Column 열 레이아웃
이것 은 앞의 다섯 번 째 목록 편 에서 소 개 된 것 입 니 다.그 중에서 Row 는 줄 레이아웃(즉,하위 요 소 는 한 줄 로 배열)을 대표 하고 Column 은 열 레이아웃(즉,하위 요 소 는 한 열 로 배열)을 대표 합 니 다.구체 적 으로 Flutter 입문 과 실전(5):그림 과 글 이 모두 훌륭 한 목록 을 참고 할 수 있 습 니 다.
ListView 목록 구성 요소
목록 보 기 는 이전 편 과 마찬가지 로 이 편의 용법 만 다 릅 니 다.전체 페이지 를 목록 에 따라 스크롤 할 수 있 도록 합 니 다.각 부분 구성 요 소 를 목록 의 children 속성 에 직접 넣 습 니 다.배열 로 목록 요 소 를 구축 하 는 것 이 아니 라 스크롤 보기 와 유사 합 니 다.
GridView 격자 구성 요소
GridView 는 하나의 용 기 를 행렬 에 따라 구분 하 는 데 사 용 됩 니 다.주축 의 요소 개 수 를 지정 할 수 있 습 니 다(스크롤 방향 에 따라 정 합 니 다).그 다음 에 총 요소 의 개수 에 따라 격자 에 자동 으로 채 울 수 있 습 니 다.예 를 들 어 세로 로 스크롤 할 때 줄 방향 에 몇 개의 격자 가 있 는 지 지정 할 수 있 습 니 다.각 격자 마다 요 소 를 지정 할 수 있 습 니 다.한 줄 의 수 를 초과 하면 자동 으로 다른 줄 로 바 뀝 니 다.가장 간단 한 용법 은 GridView.count 방법 으로 GridView 를 구축 하 는 것 입 니 다.용법 은 다음 과 같 습 니 다.
GridView.count(
crossAxisSpacing: gridSpace,
mainAxisSpacing: gridSpace,
crossAxisCount: crossAxisCount,
// ， GridView ， ListView
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: buttons.map((item) {
return _getMenus(item['icon'], item['name'], color: textColor);
}).toList(),
);
코드 구현
먼저 레이아웃 을 분석 합 니 다.모든 메뉴 단 추 는 똑 같은 레이아웃 입 니 다.통 일 된 열 레이아웃 으로 메뉴 단 추 를 완성 하고 재 활용 성 을 높 일 수 있 습 니 다.메뉴 단 추 는 위 에서 다음 까지 아이콘,간격(아이콘 과 텍스트 사이),메뉴 이름 입 니 다.구현 코드 는 다음 과 같 습 니 다:
Column _getMenus(String icon, String name, {Color color = Colors.black}) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
child: Image.asset(icon),
width: 50,
height: 50,
),
SizedBox(
height: 5,
),
Text(name, style: TextStyle(fontSize: 14.0, color: color, height: 2)),
],
);
그 다음 에 상단 구역 을 보면 상단 구역 은 두 개의 버튼 만 있 고 장식 이 있 는 용 기 를 사용 하여 배경 장식 과 원 각 을 실현 합 니 다.줄 레이아웃 을 사용 하여 두 메뉴 단 추 를 가로로 고 르 게 배열 합 니 다.동시에 Center 레이아웃 을 사용 하여 두 메뉴 를 가운데 로 유지 합 니 다.여기에 용기 의 높이 가 지 정 된 것 은 미관 상 으로 는 너무 작 아 어 울 리 지 않 기 때문에 실제 개발 은 UI 설계 원고 에 따라 정 해 야 한다.
Widget _headerGridButtons() {
double height = 144;
List<Map<String, String>> buttons = GridMockData.headerGrids();
return Container(
height: height,
margin: EdgeInsets.fromLTRB(MARGIN, MARGIN, MARGIN, MARGIN / 2),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4.0),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF56AF6D),
Color(0xFF56AA6D),
]),
),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: buttons
.map((item) =>
_getMenus(item['icon'], item['name'], color: Colors.white))
.toList()),
),
);
}
Widget _dynamicGridButtons(List<Map<String, String>> buttons, String title,
{int crossAxisCount = 4}) {
return Container(
margin: EdgeInsets.fromLTRB(MARGIN, MARGIN, MARGIN, MARGIN / 2),
padding: EdgeInsets.all(MARGIN),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4.0),
color: Colors.white,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(color: Colors.grey[700]),
),
SizedBox(height: 20),
_gridButtons(buttons, crossAxisCount, textColor: Colors.black),
],
),
);
}
GridView _gridButtons(List<Map<String, String>> buttons, int crossAxisCount,
{Color textColor = Colors.white}) {
double gridSpace = 5.0;
return GridView.count(
crossAxisSpacing: gridSpace,
mainAxisSpacing: gridSpace,
crossAxisCount: crossAxisCount,
// ， GridView ， ListView
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
children: buttons.map((item) {
return _getMenus(item['icon'], item['name'], color: textColor);
}).toList(),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
_headerGridButtons(),
_dynamicGridButtons(GridMockData.financeGrids(), ' '),
_dynamicGridButtons(GridMockData.serviceGrids(), ' '),
_dynamicGridButtons(GridMockData.thirdpartyGrids(), ' '),
],
),
);
}
단추 데 이 터 는 모두 Mock 데 이 터 를 사용 합 니 다.여 기 는 List
static List<Map<String, String>> financeGrids() {
return [
{'name': ' ', 'icon': 'images/grid-buttons/grid-1-1.png'},
{'name': ' ', 'icon': 'images/grid-buttons/grid-1-2.png'},
{'name': ' ', 'icon': 'images/grid-buttons/grid-1-3.png'},
{'name': ' ', 'icon': 'images/grid-buttons/grid-1-4.png'},
];
}
결어:
Flutter 가 제공 하 는 기본 UI 구성 요소 라 이브 러 리 는 대부분의 복잡 한 페이지 레이아웃 을 만족 시 킬 수 있 으 며,다양한 레이아웃 구성 요소 의 조합 을 통 해 완성 할 수 있 습 니 다.따라서 기본 적 인 레이아웃 구성 요소 의 특성 을 익히 는 것 이 중요 하 다.또한,구성 요소 의 분할 과 분리 완성 서브 구성 요소 의 패 키 징 에 주의해 야 하 며,재 활용 성 을 향상 시 키 는 동시에 포 함 된 등급 이 너무 깊 은 문 제 를 피 할 수 있 습 니 다.
이상 은 Flutter 가 위 챗 결제 인터페이스의 실현 에 대한 상세 한 내용 입 니 다.Flutter 위 챗 결제 인터페이스 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 시기 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Flutter】DateTime 전월의 일수를 취득한다달의 일수를 취득할 필요가 있어, 의외로 수요 있을까라고 생각했으므로 비망록 정도에 남겨 둡니다. DateTime 날짜에 0을 입력하면 전월 DateTime이 됩니다. 2021년 3월 0일 = 2021년 2월 28일...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
