Flutter:将 ListTile 标记为在抽屉中选中

Posted

技术标签:

【中文标题】Flutter:将 ListTile 标记为在抽屉中选中【英文标题】:Flutter: Mark ListTile as selected in drawer 【发布时间】:2019-09-04 06:33:32 【问题描述】:

我想将当前页面的 ListTile 标记为选中,但 2 天前我正在寻找一种通用的方法。

我看到了像this 这样的示例,您可以在其中硬编码磁贴 ID 并使用大小写来了解当前的Tile。我的问题是,如果我有,夸大其词,100 ListTiles 怎么办?如何以编程方式将selected 属性更改为选定的Tile?或者更真实的情况:我有一个Drawer,它在每个版本中都会改变形状,因此保留带有硬编码 ID 的代码是没有用的。我希望你能理解这个想法。

几天来我一直在尝试不同的解决方案,但对我来说似乎没有一个足够通用。

【问题讨论】:

【参考方案1】:

我认为这很简单,您可以创建一个新类来选择您的数据和布尔值

    class Post 
      final bool selected;
      var data;

      Post(
        this.selected,
        this.data
      );
    

现在,当您在 itemBuilder 中使用 LIstView.builder 时,如果 list[index].selected 为 true,则将颜色设置为蓝色,如果不是,则将其设置为白色,或者在点击或按下您使用的任何内容时保存最后一个单击全局变量中的索引(称为 savedIndex)-使用 (-1) 对其进行初始化-并在此列表索引处将 selected 更改为 true,然后如果 savedIndex 不等于 -1,则更改 list[savedIndex].selected=false。


全局变量

int selectedIndex =-1;

和 itemBuilder。

itemBuilder: (BuildContext _context, int i) 


        return GestureDetector(

                child:
                Container(
                  decoration: new BoxDecoration(
                    borderRadius: new BorderRadius.circular(16.0),
                    color:_list[index].selected? Colors.blue:colors.white,
                  ),
                  child: _buildRow(_list[index]),) ,
                onTap: () 
                   setState()
                        if(savedIndex!=-1)
                         list[savedIndex].selected=false
                         
                       _list[index].selected=true;
                       savedIndex=index;
                    
                 
              );

      

【讨论】:

是的,我曾想过那个解决方案,但我在考虑更多的生产层面的东西。这个全局变量应该分配在哪里?如何在不同屏幕之间共享Drawer?我应该使用ScopedModel 类吗? ***.com/questions/51659805/… 第二个答案是最好的这个***.com/a/51661926/11252816 这是静态抽屉部分,至于任何其他问题,我似乎没有得到你真正想要的东西 我一直在研究不同的方法,显然从最好到最少的顺序是:RxDart、scoped_modelInheritedWidgetStatefulWidget。我将尝试前两个,一旦我有一些功能性的东西,我就会把它作为答案。还是谢谢!【参考方案2】:

像下面这样简单地创建 enum 类。

enum DrawerSelection  home, favorites, settings

如果需要,创建枚举对象并传递预定义的值,在我的情况下,我将 home 作为选定的 ListTile 项传递。就像下面的代码。

class _MyHomePage extends State<MyHomePage> 
DrawerSelection _drawerSelection = DrawerSelection.home;

然后在 ListTile 中使用 selected 属性并更改 enum onTap() 如下代码。

 ListTile(
              selected: _drawerSelection == DrawerSelection.home,
              title: Text('Home'),
              leading: Icon(Icons.home),
              onTap: () 
                Navigator.pop(context);
                setState(() 
                    _drawerSelection = DrawerSelection.home;
                    _currentWidget = MainWidget();                    
                    _appBarTitle = Text("Home");
                );
              ,
            ),
 ListTile(
            selected: _drawerSelection == DrawerSelection.favorites,
            title: Text('Favorites'),
            leading: Icon(Icons.favorite),
            onTap: () 
              Navigator.pop(context);                 
              setState(() 
                  _drawerSelection = DrawerSelection.favorites;                 
                  _currentWidget = FavoritesWidget();                  
                  _appBarTitle = Text("Favorites");
              );
            ,
          ),
ListTile(
            selected: _drawerSelection == DrawerSelection.settings,
            title: Text('Settings'),
            leading: Icon(Icons.settings),
            onTap: () 
              Navigator.pop(context);
              setState(() 
                  _drawerSelection = DrawerSelection.settings;                 
                  _currentWidget = SettingsWidget();
                  _appBarTitle = Text("Settings");
              );
            ,
          ),

【讨论】:

以上是关于Flutter:将 ListTile 标记为在抽屉中选中的主要内容,如果未能解决你的问题,请参考以下文章

Flutter中如何将onTap函数传递给ListTile?

Flutter Drawer 抽屉菜单示例

Flutter Drawer 抽屉菜单示例

通过 for 循环创建颤振抽屉

如何在 Flutter 中指定 ListTile 高度

Flutter组件ListTile 使用说明