2

我使用 Sliver 在 Flutter 中创建了一个列表（下面的 Sliver 结构）：

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()

Card 有一个 Dismissible Widget，在其中封装了一个 ListTile。Dismissible 工作正常，我可以滑动以关闭列表中的单个单元格。

我遇到的问题与我的 ListTile 中的 IconButton 有关。我的目标是，每当我点击 IconButton 时，它应该为单个单元格打开或关闭图标标志，但发生的情况是列表中的所有图标按钮都被切换。通过调查 Dismissible Widget 代码，我可以理解我需要唯一标识每个单元格才能使其工作，我尝试使用 Key 使单元格唯一，但没有奏效。有人能引导我朝着正确的方向前进吗？IconButton 的代码如下，我还尝试向 ListTile 添加一个键，但是没有用，所以我删除了它。

IconButton( 
  key: Key(item),
  icon: Icon(Icons.flag),
  color: (isPriority) ? Colors.red : Colors.grey,
  onPressed: _toggleFlag,
)
4

3 回答 3

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,
            ),
          ),
        ],
      ),
    );
  }
}
于 2018-10-09T13:59:46.213 回答
0

像这样创建你的卡

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

然后为卡片创建小部件

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;
  }
  });
   }
    ,
   ), 
  );
  }
于 2018-10-09T11:16:20.660 回答
0

我的 toggleFlag 代码在下面，我在那里已经有一个 setState，它会切换标志，但问题是当我想切换它所属的单元格的标志时，它会切换列表中的所有标志：

void _toggleFlag() {
  setState(() {
    if (isPriority) {
      isPriority = false;
    } else {
      isPriority = true;
    }
  });
}
于 2018-10-09T11:46:40.207 回答