떨림: 드롭다운 항목과 드롭다운 단추 선택 항목에 대해 다른 색상을 설정하는 방법은 무엇입니까?

떨림: 드롭다운 항목과 드롭다운 단추 선택 항목에 대해 다른 색상을 설정하는 방법은 무엇입니까?

나는 내 프로젝트에 포함시켰지만 이 문제를 고수했다.

테마를 사용해봤는데 색상도 둘 다 달라져요. 드롭다운의 배경색은 변경할 수 있지만 흰색에 검은색 텍스트를 사용하고 싶었습니다.

텍스트 색상도 흰색이므로 드롭다운이 흰색입니다

AccentColorOverride(
  child: Theme(
    data: ThemeData(
        hintColor: Colors.white,
        selectedRowColor: Colors.white),
    child: DropdownButton<String>(
      value: selectedRegion,
      hint: Text(hint_label_region, style: white18),
      isExpanded: true,
      underline: Container(
        height: 1.0,
        decoration: const BoxDecoration(
            border: Border(
                bottom: BorderSide(
                    color: Color(0xFFBDBDBD),
                    width: 2))),
      ),
      items: <String>[
        'A',
        'B',
        'C',
        'D'
      ].map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: new Text(
            value,
            style: TextStyle(color: Colors.white),
          ),
        );
      }).toList(),
      onChanged: (String newValue) {
        setState(() {
          selectedRegion = newValue;
        });
      },
    ),
  ),
)

---

앞서 Leo가 언급했듯이, 당신은 선택한 Item Builder를 사용하고 새로 생성된 목록을 전달해야 하며, 당신은 두 목록을 만들고 당신이 변경하고 싶은 것을 취하는 기능을 만들 수 있다.. 코드는 다음과 같습니다:

  List<DropdownMenuItem<String>> _createChildrenList(Color textColor) =>typesOfPayments
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: CustomText(
        color: textColor,
        padding: const EdgeInsets.symmetric(horizontal: 10),
        text: value,
        fontFamily: HelperCubit.getFontFamilyByLanguage(context),
      ),
    );   }).toList();

드롭다운 버튼에서 생성된 기능을 사용합니다

items: _createChildrenList(Colors.white),
selectedItemBuilder: (context) =>_createChildrenList(MaterialData.kPrimaryColor),

---

이것이 작동해야 한다고 생각합니다. '_selected'와 같은 상태를 정의합니다ItemValue', 사용자가 항목을 탭할 때 SetState를 호출하고 이 상태를 기준으로 드롭다운 메뉴 항목을 렌더링합니다.

    .
    .
    .
    ].map<DropdownMenuItem<String>>((String value) {
            return GestureDetector(
              onTap: () {
                 setState() {
                   _selectedItemValue = value;
                 }
              } ,
              child:DropdownMenuItem<String>(
                value: value,
                child: Container(
                  color: value == _selectedItemValue ? Colors.blue : Colors.white,
                  child: new Text(
                    value,
                    style: TextStyle(color: Colors.white),
                ),),
            ),);
          }).toList(),

---

여전히 필요한 사용자가 있는 경우 선택한 사용자 정의 Item Builder를 설정할 수 있습니다. 즉, 기본적으로 목록 유형과 관련하여 원하는 모든 항목을 표시할 수 있습니다. 다음은 예입니다:

var listSorted = list.map((dropdownItem) {
    return DropdownMenuItem<dynamic>(
        child: Text("${dropdownItem.label}",
            style: TextStyle(color: Colors.black)),
        value: dropdownItem.value);
    }).toList();
return Container(
      child: DropdownButton(
        isExpanded: true,
        iconEnabledColor: Colors.white,
        underline: Container(
          width: 200,
          height: 1,
          color: Colors.white,
        ),
        value: valueToUpdate,
        items: listSorted,
        onChanged: onChanged,
        selectedItemBuilder: (BuildContext ctxt) {
          return list.map<Widget>((item) {
            return DropdownMenuItem(
                child: Text("${item.label}",
                    style: TextStyle(color: Colors.white)),
                value: item.value);
          }).toList();
        },
        dropdownColor: backgroundColor,
      )));