Flutter에서 자동 완성 위젯을 사용하는 방법은 무엇입니까?
이를 위해 이 문서에서 자동 완성 위젯을 볼 수 있습니다. 사용자는 텍스트 입력을 입력하고 이 위젯을 사용하여 옵션 목록에서 선택할 수 있습니다. 자동 완성 위젯을 사용하려면 생성자를 호출해야 합니다. dedicated Flutter developer에서 지원을 받으면 위젯 구현의 고장을 줄일 수 있습니다. Flutter 엔지니어는 또한 엔터프라이즈급 애플리케이션을 만드는 데 도움을 줄 것입니다.
const Autocomplete<T extends Object>(
{Key? key,
required AutocompleteOptionsBuilder<T> optionsBuilder,
AutocompleteOptionToString<T> displayStringForOption = RawAutocomplete.defaultStringForOption,
AutocompleteFieldViewBuilder fieldViewBuilder = _defaultFieldViewBuilder,
AutocompleteOnSelected<T>? onSelected,
double optionsMaxHeight = 200.0,
AutocompleteOptionsViewBuilder<T>? optionsViewBuilder,
TextEditingValue? initialValue}
)
자동 완성 클래스의 속성:
1. 키 키: 위젯이 다른 위젯으로 대체되는 방식을 제어하는 위젯의 키입니다.
2. 필수 AutocompleteOptionsBuilder< T > optionsBuilder: 현재 TextEditingValue가 주어지면 이 메서드는 선택 가능한 선택 개체를 반환합니다.
3. AutocompleteOptionToString< T > displayStringForOption: 표시할 옵션의 문자열을 반환합니다.
4. AutocompleteFieldViewBuilder fieldViewBuilder: 선택 항목을 생성하는 데 사용되는 값이 있는 필드를 만드는 데 사용됩니다. 값을 지정하지 않으면 기본적으로 표준 재질 스타일 텍스트 필드가 생성됩니다.
5. AutocompleteOnSelected< T >? onSelected: 사용자가 옵션을 선택하면 이 메서드가 호출됩니다.
6. AutocompleteOptionsBuilder
객체 T는 Autocomplete 클래스의 일반 유형입니다. 이는 옵션 항목이 문자열이 아닌 모든 객체가 될 수 있음을 나타냅니다.
OptionsBuilder는 필수 명명된 인수입니다. 해당 매개변수에 대해 사용자가 선택할 수 있는 대안 목록을 반환하는 함수를 전달해야 합니다.
나만의 AutocompleteOptionsBuilder를 만들고 optionsBuilder로 전달하여 선택할 수 있는 옵션 집합을 사용자 지정합니다. AutocompleteOptionsBuilder는 TextEditingValue 매개변수를 사용하고 T Iterable을 반환하는 함수입니다. 제공된 TextEditingValue를 사용하여 현재 텍스트를 기준으로 표시할 옵션 목록을 필터링할 수 있습니다.
Autocomplete<String>(
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text == '') {
return const Iterable<String>.empty();
}
return data.where((String option) {
return option.contains(textEditingValue.text.toLowerCase());
});
},
onSelected: (String selection) {
debugPrint('You just selected $selection');
},
);
사용자가 옵션에서 항목을 선택할 때 콜백 함수를 onSelected 인수로 전송하여 이벤트를 캡처할 수 있습니다. T 매개변수는 void를 반환하는 콜백 함수에 전달됩니다.
autoComplete 위젯의 전체 예를 살펴보겠습니다.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Autocomplete Basic'),
),
body: const Center(
child: Padding(
padding: EdgeInsets.all(10.0),
child: AutocompleteText(),
),
),
),
);
}
}
class AutocompleteText extends StatelessWidget {
const AutocompleteText({Key? key}) : super(key: key);
static const List<String> data = <String>[
'Adrian',
'Axel',
'jhonn',
'bobcat',
'chameleon',
'Oliver',
'William',
'Ethan',
'Everett',
'Jayden',
];
@override
Widget build(BuildContext context) {
return Autocomplete<String>(
optionsBuilder: (TextEditingValue textEditingValue) {
if (textEditingValue.text == '') {
return const Iterable<String>.empty();
}
return data.where((String option) {
return option.contains(textEditingValue.text.toLowerCase());
});
},
onSelected: (String selection) {
debugPrint('You just selected $selection');
},
);
}
}
산출
결론
이 기사에서는 자동 완성 위젯을 만드는 방법을 살펴보았습니다. 사용자가 값 목록에서 선택할 수 있도록 함으로써 AutoComplete 위젯은 더 나은 사용자 경험을 제공할 수 있습니다. 이 기사를 즐기시기 바랍니다. Flutter 비즈니스 애플리케이션 개발 지원을 받으려면 계속 방문하세요Flutter Agency.
Reference
이 문제에 관하여(Flutter에서 자동 완성 위젯을 사용하는 방법은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/pankajdas0909/how-to-use-an-autocomplete-widget-in-flutter-cn3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
