이전 기사에서는, 우리는 단지 사용 DIO를 볼 수 있지만 응용 프로그램과 연관되지 않았기 때문에이 것은 물론,이 또한 미래 전투의 기초로 준비, 결합 된 네트워크 요청 및 응용 프로그램 인터페이스를 DIO하는 기반을 마련하기 위해 우리는 빠르게 앞으로 나아갈 수 있습니다.
1, 케이스 노트
우리는이 "큰 관심"의 예로서 역할을 선택하지만 이번에는 우리가 달성하기 위해 버튼과 동적 구성 요소를 사용합니다. 특정 비즈니스 로직은 이것이다 :
- 우리는 우리를 위해 아름다움의 종류를 입력 할 텍스트 상자를 만들
- 그런 다음 백 엔드 데이터 요청에 해당되는 버튼을 클릭
- 백 엔드 데이터가 반환 된 후, 필요에 따라 아름다움은 방으로 안내합니다
상단 천 단어의보기
(2) 동적 인 요소가 발생
당신은 우리는 다음과 같은 코드를 얻을 것이다 그것에 이름의 종류를 변경할 필요가 빠르게 안드로이드 스튜디오의 기본 구조 StatefulWidget를 생성 stful 바로 가기를 사용할 수 있습니다.
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Container(
child: child,
);
}
}
3, 추가 텍스트 상자 위젯
동적 구성 요소로, 먼저 몇 가지 인터페이스 레이아웃을합니다.
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(title: Text('美好人间'),),
body:Container(
height: 1000,
child: Column(
children: <Widget>[
TextField(
controller:typeController,
decoration:InputDecoration (
contentPadding: EdgeInsets.all(10.0),
labelText: '美女类型',
helperText: '请输入你喜欢的类型'
),
autofocus: false,
),
RaisedButton(
onPressed:_choiceAction,
child: Text('选择完毕'),
),
Text(
showText,
overflow:TextOverflow.ellipsis,
maxLines: 2,
),
],
),
)
),
);
}
get_post 4 디오 방법
레이아웃이 완료되면, 당신은 수업 내용으로 유지할 유사한 메서드 호출 원격 인터페이스에 대해 쓸 수 있지만, 여기 반환 값은 미래입니다,이 오브젝트는 대기 콜백 메소드를 지원합니다. 특정 코드는 다음과 같이 :
Future getHttp(String TypeText)async{
try{
Response response;
var data={'name':TypeText};
response = await Dio().get(
"https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/dabaojian",
queryParameters:data
);
return response.data;
}catch(e){
return print(e);
}
}
그런데에게 요청을 변화시키는 것을 제외하고는, 상기와 거의 동일한 방법을 게시 :
Future getHttp(String TypeText) async{
try{
Response response;
var data={'name':TypeText};
response = await Dio().post(
"https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/post_dabaojian",
queryParameters:data
);
return response.data;
}catch(e){
return print(e);
}
}
기능으로 돌아 왜, 만 콜백을 사용하는 특징을 반환합니다.
5 데이터 처리 후 수득
우리가 내용을 작성이 완료되면 버튼이 메소드를 호출, 버튼을 클릭하고 어떤 판단을 할 수 있습니다. 텍스트 상자로 분석하는 것은 비어 있지 않습니다. 데이터가 백엔드에 의해 반환 된 다음 때, 우리는 데이터를 업데이트하는 방법을 setState를.
특정 코드는 다음과 같이 :
void _choiceAction(){
print('开始选择你喜欢的类型............');
if(typeController.text.toString()==''){
showDialog(
context: context,
builder: (context)=>AlertDialog(title:Text('美女类型不能为空'))
);
}else{
getHttp(typeController.text.toString()).then((val){
setState(() {
showText=val['data']['name'].toString();
});
});
}
}
(6), 경우 모든 코드
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
TextEditingController typeController = TextEditingController();
String showText = '欢迎你来到美好人间';
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(title: Text('美好人间'),),
body:Container(
height: 1000,
child: Column(
children: <Widget>[
TextField(
controller:typeController,
decoration:InputDecoration (
contentPadding: EdgeInsets.all(10.0),
labelText: '美女类型',
helperText: '请输入你喜欢的类型'
),
autofocus: false,
),
RaisedButton(
onPressed:_choiceAction,
child: Text('选择完毕'),
),
Text(
showText,
overflow:TextOverflow.ellipsis,
maxLines: 2,
),
],
),
)
),
);
}
void _choiceAction(){
print('开始选择你喜欢的类型............');
if(typeController.text.toString()==''){
showDialog(
context: context,
builder: (context)=>AlertDialog(title:Text('美女类型不能为空'))
);
}else{
getHttp(typeController.text.toString()).then((val){
setState(() {
showText=val['data']['name'].toString();
});
});
}
}
Future getHttp(String TypeText)async{
try{
Response response;
var data={'name':TypeText};
response = await Dio().get(
"https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/dabaojian",
queryParameters:data
);
return response.data;
}catch(e){
return print(e);
}
}
}
7. 결론
이 단원을 학습함으로써, 우리는 다음과 같은 지식 포인트를 가져야한다
- 떨림의 동적 구성 요소에 대한 심층 이해
- 개체의 미래 사용
- 그리고 setState를 메소드의 인터페이스의 상태를 변경
- 텍스트 필드 위젯의 기본 사용