如何在flutter中获得appBar下的下拉窗口?

问题描述 投票:0回答:2
appBar: AppBar(toolbarHeight: 100,
  automaticallyImplyLeading: false,
  elevation: 10,
  backgroundColor: Colors.white,

  title: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      SizedBox(height:30),
      Row(
        children: [
          Icon(Icons.home_rounded,
            color: HexColor('#24591C'),),
          Text('Home',
            style: TextStyle(
                color: Colors.black,
                fontSize:   16,
                fontWeight: FontWeight.w700
            ),),
          Icon(Icons.arrow_drop_down_rounded,
              size: 30,
              color: HexColor('#444444')),
        ],
      ),
      Container(
        padding: EdgeInsets.only(left: 2),
        child: Text('B Block, NCC Aster Park...',
          style: TextStyle(
              color: HexColor('#999999'),
              fontSize: 11
          ),),
      )
    ],
  ),

enter image description here

当单击我在应用栏标题下声明的“主页”文本时,我需要显示下拉菜单。我无法弄清楚。

android flutter dart flutter-layout
2个回答
0
投票

您可以将 ExpansionTile 小部件用于可扩展区域。

例如

 ExpansionTile(
            title: Row(
              children: [
                Icon(Icons.home_rounded,
                  color: HexColor('#24591C'),),
                Text('Home',
                  style: TextStyle(
                      color: Colors.black,
                      fontSize:   16,
                      fontWeight: FontWeight.w700
                  ),),
                Icon(Icons.arrow_drop_down_rounded,
                    size: 30,
                    color: HexColor('#444444')),
              ],
            ),
            children: [
              // the widgets you want to show on click
            ],
          ),

0
投票

您现在可以使用 flutter 中的 AppBarDropdown 包来执行此操作。您可以根据您的场景对其进行更多修改,例如将其对齐到 centerLeft 以及根据您的需要进行其他操作。

© www.soinside.com 2019 - 2024. All rights reserved.