簡體   English   中英

如何更改 flutter 中的特定圖標顏色?

[英]How to change a specific Icon color in flutter?

我試圖在用戶單擊它時更改 IconButton 的顏色,我嘗試在用戶單擊它時設置 state,但問題是頁面中的每個圖標都會改變顏色我希望這發生在按鈕上用戶並非全部點擊,這些圖標用於社交媒體帖子,因此我無法定義變量。

                     Padding(
                  padding: EdgeInsets.fromLTRB(15.0, 15.0, 15.0, 10.0),
                  child : Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [


                      IconButton(
                        icon: Icon(
                            Icons.favorite_border,
                            color: Colors.black,
                            size : 25.0
                        ),
                        onPressed: () {

                        },
                      ),
                      Text(
                        '29k',
                        style: TextStyle(
                          color : Colors.black,
                          fontSize: 15.0,
                        ),
                      ),
                      SizedBox(width: 10.0,),
                      IconButton(
                        icon: Icon(
                            Icons.question_answer,
                            color: _likeButtonColor,
                            size : 25.0
                        ),
                        onPressed: () {
                          print(games[index]['posts']);
                          setState(() {
                            _likeButtonColor = Colors.red;
                          });
                        },

                      ),
                      Text(
                        '1312',
                        style: TextStyle(
                          color : Colors.black,
                          fontSize: 15.0,
                        ),
                      )


                    ],
                  ),
                ),

問題是您對所有 IconButton 小部件的顏色屬性使用相同的變量。

您必須創建一個列表,其中包含每個項目的顏色值,讓我通過示例向您展示。

class Delet2 extends StatefulWidget {
  @override
  _Delet2State createState() => _Delet2State();
}

class _Delet2State extends State<Delet2> with SingleTickerProviderStateMixin {
  List<Color> _colors = [];

  getdatafromserver() async {
    await Future.delayed(
        Duration(seconds: 2)); //this show you are fetching data from server
    _colors =
        List.generate(10, (index) => Colors.amber); // here 10 is items.length
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    getdatafromserver();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _colors.length ?? 0,
        itemBuilder: (_, index) {
          return IconButton(
              icon: Icon(Icons.question_answer,
                  color: _colors[index], size: 25.0),
              onPressed: () {
                setState(() {
                  _colors[index] = Colors.red;
                });
              });
        },
      ),
    );
  }
}

暫無
暫無

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

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