簡體   English   中英

如何更改 Dart Flutter listTile 項目的圖標顏色?

[英]How to change the color of icons of Dart Flutter listTile items?

在此處輸入圖像描述

對於 listTile 中的項目,圖標的顏色默認為黃色。 我怎樣才能把它變成黑色?

代碼:

body: Container(
  padding: EdgeInsets.all(7),
  child: Column(
    
    children: [
      
      Text(defaultFlag, style: TextStyle(fontSize: 24),),
      SizedBox(height: 10,),


      Expanded(
        
        child: ListView.builder(

          itemCount: levels.length,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(2.0),
              child: Container(
                child: InkWell(
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(color: Colors.black),
                    ),
                    child: ListTile(
                      leading: languageLevelIcon(levels[index].languageLevelName,),
                      title: Text(levels[index].languageLevelName, style: TextStyle(fontSize: 20),),
                      trailing: Icon(Icons.arrow_forward_ios, color: Colors.black,),
                      iconColor: Colors.black,
                    ),
                    ),
                  onTap: () {
                    print("tıklandı " + levels[index].languageLevelName);
                  },
                ),
              ),
            );
          },
        ),
      ),
    ],
  ),
),
      
        
      
    );
  }

  Widget languageLevelIcon(String levelName) {
    switch (levelName) {
      case "A1":
        return Icon(Icons.star, color: Colors.yellow,);
      case "A2":
        return Icon(Icons.star_outline, color: Colors.yellow,);
      case "B1":
        return Icon(Icons.keyboard_arrow_up, color: Colors.yellow,);
      case "B2":
        return Icon(Icons.arrow_drop_up, color: Colors.yellow,);
      case "C1":
        return Icon(Icons.add_circle ,color: Colors.yellow,);
      case "C2":
        return Icon(Icons.add_circle_outline_outlined, color: Colors.yellow,);
      default:
        return Icon(Icons.no_encryption, color: Colors.yellow,);
    }
  }
}

class languageLevel {
  String languageLevelName;

  languageLevel(this.languageLevelName);
}

我想改變它,因為黃色不是很清楚。 我在這里先向您的幫助表示感謝。 我想把它改成黑色。

我根據languageLevelName設置圖標。 非常感謝您的幫助。

您能否將languageLevelIconColor定義為具有默認值的參數?

  Icon languageLevelIcon(String levelName, [Color? color = Colors.yellow]) {
    switch (levelName) {
      case "A1":
        return Icon(Icons.star, color: color);
      case "A2":
        return Icon(Icons.star_outline, color: color);
      case "B1":
        return Icon(Icons.keyboard_arrow_up, color: color);
      case "B2":
        return Icon(Icons.arrow_drop_up, color: color);
      case "C1":
        return Icon(Icons.add_circle, color: color);
      case "C2":
        return Icon(Icons.add_circle_outline_outlined, color: color);
      default:
        return Icon(Icons.no_encryption, color: color);
    }
  }
}

完整代碼示例

在此處輸入圖像描述

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// PRESENTATION LAYER

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      home: const Scaffold(
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: ListView.builder(
            itemCount: 5,
            itemBuilder: (BuildContext context, int index) {
              return Padding(
                padding: const EdgeInsets.all(5.0),
                child: InkWell(
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(color: Colors.black),
                      color: Colors.yellow.shade200,
                    ),
                    child: ListTile(
                      leading:
                          languageLevelIcon('A$index', Colors.green.shade700),
                      title: Text(
                        'Level $index',
                        style: const TextStyle(fontSize: 20),
                      ),
                      trailing: const Icon(
                        Icons.arrow_forward_ios,
                        color: Colors.black,
                      ),
                      iconColor: Colors.black,
                    ),
                  ),
                  onTap: () {},
                ),
              );
            },
          ),
        ),
      ),
    );
  }

  Icon languageLevelIcon(String levelName, [Color? color = Colors.yellow]) {
    switch (levelName) {
      case "A1":
        return Icon(Icons.star, color: color);
      case "A2":
        return Icon(Icons.star_outline, color: color);
      case "B1":
        return Icon(Icons.keyboard_arrow_up, color: color);
      case "B2":
        return Icon(Icons.arrow_drop_up, color: color);
      case "C1":
        return Icon(Icons.add_circle, color: color);
      case "C2":
        return Icon(Icons.add_circle_outline_outlined, color: color);
      default:
        return Icon(Icons.no_encryption, color: color);
    }
  }
}

暫無
暫無

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

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