簡體   English   中英

在 ListView.builder 中更改特定的 ListTile 圖標

[英]Change particular ListTile Icon in ListView.builder

我對 Flutter 和 Dart 比較陌生,所以我有一個關於 ListView 操作的問題。 目前,下面的代碼可以工作並在 ListView 中顯示一些基本信息。 我將如何實施解決方案,以便當我單擊特定的列表磁貼時,其圖標會更改為其他內容? 以下是我目前的股票代碼:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  Widget _getListItemTile(BuildContext context, int index) {
    return Card(
      child: GestureDetector(
        child: ListTile(
          leading: Icon(Icons.check_box_outline_blank),
          title: Text('My Item'),
          onTap: () {},
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Test App'),
        centerTitle: true,
      ),
      body: ListView.builder(
        itemCount: 7,
        itemBuilder: _getListItemTile,
      ),
    );
  }
}

您可以在下面復制粘貼運行完整代碼
您可以聲明List<bool>並通過boolList[index]更改leading圖標
代碼片段

List<bool> boolList = [true, true, true, true, true, true, true];
...
Card(
      child: GestureDetector(
        child: ListTile(
          leading: boolList[index]
              ? Icon(Icons.check_box_outline_blank)
              : Icon(Icons.place),
          title: Text('My Item'),
          onTap: () {
            boolList[index] = !boolList[index];
            setState(() {});
          },
        ),
      ),
    )

工作演示

在此處輸入圖片說明

完整代碼

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<bool> boolList = [true, true, true, true, true, true, true];

  Widget _getListItemTile(BuildContext context, int index) {
    return Card(
      child: GestureDetector(
        child: ListTile(
          leading: boolList[index]
              ? Icon(Icons.check_box_outline_blank)
              : Icon(Icons.place),
          title: Text('My Item'),
          onTap: () {
            boolList[index] = !boolList[index];
            setState(() {});
          },
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Test App'),
        centerTitle: true,
      ),
      body: ListView.builder(
        itemCount: boolList.length,
        itemBuilder: _getListItemTile,
      ),
    );
  }
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM