>

플러터에서 PopupMenuItem의 배경색을 변경하는 방법은 무엇입니까?

지금은 PopupMenuItem의 자식 색상을 변경하면 결과는 다음과 같습니다.

코드는 다음과 같습니다.

PopupMenuButton<int>(
        onSelected: (value) {
          // TODO: Implement onSelect
        },
        offset: Offset(50, 50),
        itemBuilder: (context) => [
          PopupMenuItem(
            value: 1,
            child: Container(
              height: double.infinity,
              width: double.infinity,
              color: Colors.greenAccent,  // i use this to change the bgColor color right now
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Icon(Icons.check),
                  SizedBox(width: 10.0),
                  Text("Konfirmasi Update"),
                  SizedBox(width: 10.0),
                ],
              ),
            ),
          ),

원하는 것은 "Konfirmasi Update"옵션의 배경색을 변경하는 것입니다. 색상 위의 그림에서 볼 수 있듯이 색상은 옵션 외부에 흰색 영역이 있습니다.

PopupMenuItem 외부에 흰색 영역을 남기지 않고 PopupMenuItem 배경색을 완전히 변경하는 방법은 무엇입니까?

  • 답변 # 1

    PopupMenuButton 를 사용하는 방법은 없습니다  그리고 PopupMenuItem  소스 코드를 확인하면 세로 및 가로 패딩에 대한 하드 코드 값이 있기 때문에 위젯을 즉시 사용할 수 있습니다.

    popup_menu.dart 의 코드를 수정했습니다  파일, 특히 다음 값 :

    const double _kMenuVerticalPadding = 0.0;//8.0;
    const double _kMenuHorizontalPadding = 0.0;//16.0;
    
    

    작동 시키려면이 파일을 프로젝트로 다운로드하십시오 : https://gist.github.com/diegoveloper/995f1e03ef225edc64e06525dc024b01

    프로젝트에서 해당 파일을 가져 와서 별명 추가 :

    import 'your_project/my_popup_menu.dart' as mypopup;
    
    

    사용법:

     @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: mypopup.PopupMenuButton<int>(
              elevation: 20,
              onSelected: (value) {
                // TODO: Implement onSelect
              },
              offset: Offset(50, 50),
              itemBuilder: (context) => [
                mypopup.PopupMenuItem(
                  value: 1,
                  child: Container(
                    height: double.infinity,
                    width: double.infinity,
                    color: Colors
                        .greenAccent, // i use this to change the bgColor color right now
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Icon(Icons.check),
                        SizedBox(width: 10.0),
                        Text("Konfirmasi Update"),
                        SizedBox(width: 10.0),
                      ],
                    ),
                  ),
                ),
                mypopup.PopupMenuItem(
                  value: 1,
                  child: Container(
                    height: double.infinity,
                    width: double.infinity,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        Icon(Icons.check),
                        SizedBox(width: 10.0),
                        Text("Revisi Update"),
                        SizedBox(width: 10.0),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    
    

    결과

  • 답변 # 2

    테마 안에 PopupMenuButton을 넣을 수 있습니다. 테마에서 원하는 배경색에 대해 cardColor를 업데이트해야합니다 (아래 참조).

    Center(
            child: Theme(
                data: Theme.of(context).copyWith(
                  cardColor: Colors.greenAccent,
                ),
                child: PopupMenuButton<int>(
                    onSelected: (value) {
                    },
                    offset: Offset(50, 50),
                    itemBuilder: (context) => [
                      PopupMenuItem(
                        value: 1,
                        child: Container(
                          height: double.infinity,
                          width: double.infinity,
                          color: Colors.greenAccent,  // i use this to change the bgColor color right now
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: <Widget>[
                              Icon(Icons.check),
                              SizedBox(width: 10.0),
                              Text("Konfirmasi Update"),
                              SizedBox(width: 10.0),
                            ],
                          ),
                        ),
                      )
                    ]
                )
            )
        )
    
    

관련 자료

  • 이전 kdb - 가능한 날짜 문자열을 테이블 행과 일치시키는 방법은 무엇입니까?
  • 다음 node.js - 전체적으로 설치되지 않은 모든 npm 패키지는 직접 실행할 수 없습니다