如何为列表中的项目创建突出显示效果? [英] How can I create a highlight effekt for item in list?

问题描述

我想创建一个列表，用户可以在其中按住列表项上的按钮，然后使该项目突出显示，以使屏幕的其余部分变黑且透明(下面的示例)

I want to create a list where a user can hold down a button on the list item, and then that item gets highlighted in a way that the rest of the screen becomes dark and transparent (Example below)

如何实现此突出显示?我试着看了口罩，但不确定那是最好的.

How do I achieve this highlighting? I tried looking into masks, but not sure if that's the best thing.

仅需注意:我想以一种仅在用户按下按钮时才进行突出显示的方式来实现它.

Just a note: I want to achieve it in a way that the highlighting only happens while the user is pressing the button.

非常感谢能够指导我朝正确方向发展的任何帮助！

Any help that can guide me to a good direction is much appreciated!

推荐答案

尝试一下， focused_menu ，我认为listview也可以:

Try this, focused_menu, I think listview will do too:

GridView(
                  physics: BouncingScrollPhysics(),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                  children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

                       // Wrap each item (Card) with Focused Menu Holder
                      .map((e) => FocusedMenuHolder(
                        menuWidth: MediaQuery.of(context).size.width*0.50,
                        blurSize: 5.0,
                        menuItemExtent: 45,
                        menuBoxDecoration: BoxDecoration(color: Colors.grey,borderRadius: BorderRadius.all(Radius.circular(15.0))),
                        duration: Duration(milliseconds: 100),
                        animateMenuItems: true,
                        blurBackgroundColor: Colors.black54,
                        openWithTap: true, // Open Focused-Menu on Tap rather than Long Press
                        menuOffset: 10.0, // Offset value to show menuItem from the selected item
                        bottomOffsetHeight: 80.0, // Offset height to consider, for showing the menu item ( for example bottom navigation bar), so that the popup menu will be shown on top of selected item.
                        menuItems: <FocusedMenuItem>[
                          // Add Each FocusedMenuItem  for Menu Options
                          FocusedMenuItem(title: Text("Open"),trailingIcon: Icon(Icons.open_in_new) ,onPressed: (){
                            Navigator.push(context, MaterialPageRoute(builder: (context)=>ScreenTwo()));
                          }),
                          FocusedMenuItem(title: Text("Share"),trailingIcon: Icon(Icons.share) ,onPressed: (){}),
                          FocusedMenuItem(title: Text("Favorite"),trailingIcon: Icon(Icons.favorite_border) ,onPressed: (){}),
                          FocusedMenuItem(title: Text("Delete",style: TextStyle(color: Colors.redAccent),),trailingIcon: Icon(Icons.delete,color: Colors.redAccent,) ,onPressed: (){}),
                        ],
                        onPressed: (){},
                        child: Card(
                              child: Column(
                                children: <Widget>[
                                  Image.asset("assets/images/image_$e.jpg"),
                                ],
                              ),
                            ),
                      ))
                      .toList(),
                ),

这篇关于如何为列表中的项目创建突出显示效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！