펄럭임: 자동 완성 제안은 이름 대신 '객체의 인스턴스'를 표시합니다

펄럭임: 자동 완성 제안은 이름 대신 '객체의 인스턴스'를 표시합니다

자동완성 위젯 사용 가능한 플러터 쇼 제안 목록을 사용하고 있는데 직원 이름 대신 표시됩니다.

직원 목록이 저장된 곳에,

List<LOTOEmployee> employees = [];

자동 완성 위젯 코드,

Autocomplete<LOTOEmployee>(
                           optionsBuilder: (value) {
                                  return employee
                                       .where((e) => e.label.contains(value.text));
                                  },
                              ),

그것이 무엇을 보여주고 있는 것

내가 어떻게 고칠 수 있는지 누가 말해줄래

---

왜 이런 일이 일어날까요?

기본적으로 메서드에서 다트 출력 "Instance of"의 클래스입니다.

이거 어떻게 고쳐요?

클래스에 대한 메서드를 재정의하고 필요한 출력 값을 반환합니다.

예:

class LOTOEmployee {
    String name;
    @override
    String toString() {
        return name;
    }
}

---

이를 위한 더 나은 해결책이 있습니다. 오토컴플리트에는 옵션을 받아 문자열을 출력하는 "displayStringForOption"이라는 또 다른 매개 변수가 있다.

return Autocomplete(
      optionsBuilder: (value) { ... },
      displayStringForOption: (employee) => employee.label,
    );

---

toString() 메서드를 재정의하는 것은 축약적인 해결책이지만, (LOTO 직원) CLASS의 두 개 이상의 필드를 통해 생성해야 하는 결과에서는 이를 제거하기가 복잡할 것입니다.

• 적절한 접근 방식:

    Autocomplete<LOTOEmployee>(
     optionsBuilder: (value) 
     {
       return employee.where((e) => 
       e.label.contains(value.text)).toList();
     },
     displayStringForOption: (LOTOEmployeebeans beans) => beans.label),

• ViewBuilder Side 옵션에서는 다음과 같은 몇 가지 사항을 언급해야 합니다:

     optionsViewBuilder:(BuildContext context, Function onSelected, 
     Iterable<LOTOEmployeebeans> options) {

     // MaterialApp/Widgets/ListTile goes here.
     // You can even use the other fields of the class here ( 
     options.emplyeeSalary )

     }

---

                  Autocomplete<Category>(
                      optionsBuilder:
                          (TextEditingValue textEditingValue) async {
                        
                        if (textEditingValue.text == '') {
                          return const Iterable<Category>.empty();
                        }
                        return await controller.getCategories();
                      },
                      onSelected: (Category selection) {
                        debugPrint('You just selected $selection');
                      },
                      optionsViewBuilder: (context,
                          Function(Category) onSelected,
                          Iterable<Category> options) {
                        return Align(
                          alignment: Alignment.topLeft,
                          child: Material(
                            elevation: 4.0,
                            child: Container(
                              height: 200,
                              width: 200,
                              color: Colors.white,
                              child: ListView.builder(
                                padding: const EdgeInsets.all(8.0),
                                itemCount: options.length,
                                itemBuilder:
                                    (BuildContext context, int index) {
                                  final option = options.elementAt(index);
                                  return GestureDetector(
                                    onTap: () {
                                      onSelected(option);
                                    },
                                    child: ListTile(
                                      title: Text(option.name!),
                                    ),
                                  );
                                },
                              ),
                            ),
                          ),
                        );
                      },
                    ),

항목 표시를 만드는 데 사용할 수 있습니다.