Flutter:如何在列表中没有选择所有图标的情况下选择列表中的图像图标?

时间:2018-10-09 10:26:00

标签: flutter flutter-sliver

我已经使用Sliver在Flutter中创建了一个列表(下面的Sliver结构):

Inventory::with(['product', 'size', 'color'])->when($request->inv_filter === 'code', function ($builder) {
    $builder->whereHas('product', function ($q) {
        $q->where('code', 'like', "%".request()->searchText."%");
    });
})->where('is_deleted', 0)->orderByDesc('id')->get();

卡中封装有一个Dismissible Widget,可在其中创建ListTile。 Dismissible工作正常,我可以滑动以消除列表中的单个单元格。

我遇到的问题与ListTile中的IconButton有关。我的目的是,每当我点击IconButton时,都应该为单个单元格打开或关闭Icon Flag,但是发生的是,列表中的所有Icon Button都被切换了。通过研究Dismissible Widget代码,我可以了解到我需要唯一地标识每个单元才能使其正常工作,我尝试使用Key来使这些单元唯一,但这没有用。有人能够引导我朝正确的方向发展吗?下面是IconButton的代码,我也尝试向ListTile添加一个键,但是该键不起作用,因此我将其删除。

return Scaffold(

  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        //leading: Icon(Icons.arrow_back),
        expandedHeight: 150.0,
        pinned: true,
      ),

      SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            final item = taskList[index];

            return Card()

3 个答案:

答案 0 :(得分:0)

像这样创建您的卡

 return new Users(example: taskList[index]);

然后将卡的craete小部件

class Users extends StatefulWidget
{

final String example;
const  Users  ({Key key, this.example}) : super(key: key);
@override
UserWidgets createState() => UserWidgets();
}

class UserWidgets extends State<Users>
{

 @override
 Widget build(BuildContext context)
 {
     return new Container(

  child: Card(
     child:new IconButton( 
 icon: Icon(Icons.flag),
 color: (isPriority) ? Colors.red : Colors.grey,
 onPressed: ()
   {
    setState(() {
  if (isPriority) {
  isPriority = false;
  } else {
  isPriority = true;
  }
  });
   }
    ,
   ), 
  );
  }

答案 1 :(得分:0)

我的toggleFlag代码在下面,我已经在其中有一个setState,它可以切换标志,但是问题是当我想要切换它所属的单元格的标志时,它将切换列表中的所有标志:

void _toggleFlag() {
  setState(() {
    if (isPriority) {
      isPriority = false;
    } else {
      isPriority = true;
    }
  });
}

答案 2 :(得分:0)

我能够简化代码以捕获所有代码并显示图标按钮的位置(图标按钮在底部)。我仍然遇到的问题是,如果我点击一个图标标志,那么所有图标标志都会被打开,而不是我所点击的特定图标标志。

class HomePage extends StatefulWidget {
  _HomePageDemoState createState() => _HomePageDemoState();
}

class _HomePageDemoState extends State<HomePage> {
  List<String> taskList = [
    'The Enchanted Nightingale',
    'The Wizard of Oz',
    'The BFG'
  ];
  bool isPriority = false;

  void _toggleFlag() {
    setState(() {
      if (isPriority) {
        isPriority = false;
      } else {
        isPriority = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                final item = taskList[index];
                return Card(
                  elevation: 8.0,
                  child: ListTile(
                    contentPadding: EdgeInsets.all(0.0),
                    leading: Container(
                      color: (isPriority) ? Colors.red : Colors.grey,
                      //padding: EdgeInsets.only(right: 12.0),
                      padding: EdgeInsets.all(20.0),
                      child: Text(
                        '01',
                        style: TextStyle(
                            fontSize: 20.0,
                            fontWeight: FontWeight.bold,
                            color: Colors.white),
                      ),
                    ),
                    title: Text('$item'), //Text('The Enchanted Nightingale'),
                    subtitle:
                        Text('Music by Julie Gable. Lyrics by Sidney Stein.'),


                    trailing: IconButton(
                      key: Key(item),
                      icon: Icon(Icons.flag),
                      color: (isPriority) ? Colors.red : Colors.grey,
                      onPressed: _toggleFlag,
                    ),
                  ),
                );
              },
              childCount: taskList.length,
            ),
          ),
        ],
      ),
    );
  }
}