如何在 Flutter Dart 中更改 ListView 中的默认文本颜色?
how to change default text color in ListView in flutter Dart?
我想更改 ListView
的文本颜色以及复选框,但无法使用 ListView's
选中的项目动态更改文本颜色?
我还在 set State 选项中添加了颜色,但找不到我要找的结果。
这是我的代码:
ListView(
children: [
Text(
''' Categories''',
style: TextStyle(
color: Color(0xff181725),
fontSize: 24,
fontFamily: "Gilroy",
fontWeight: FontWeight.normal,
),
),
SizedBox(height: 13),
...checkBoxListOne.map(
(item) => ListTile(
onTap: () => onAllClicked(item),
leading: Checkbox(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
side: BorderSide(
color: Color(0xffC2C2C2),
width: 2,
),
activeColor: Color(0xff53B175),
value: item.value,
onChanged: (value) => onAllClicked(item),
),
title: Text(
item.title!,
style: TextStyle(
color: Color(0xff181725),
),
),
),
),
SizedBox(height: 40),
Text(
''' Brand''',
style: TextStyle(
color: Color(0xff181725),
fontSize: 24,
fontFamily: "Gilroy",
fontWeight: FontWeight.normal,
),
),
SizedBox(height: 13),
...checkBoxListTwo.map(
(item) => ListTile(
onTap: () => onAllClicked(item),
leading: Checkbox(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
side: BorderSide(
color: Color(0xffC2C2C2),
width: 2,
),
activeColor: Color(0xff53B175),
value: item.value,
onChanged: (value) => onAllClicked(item),
),
title: Text(item.title!),
),
),
],
),
这里是 setState
部分:
onAllClicked(CheckBoxModal ckbItem) { setState(() { ColoredBox( color: Color(0xff53B175), ); ckbItem.value = !ckbItem.value; }); }
您应该将字段 isSelected
添加到 checkBoxListOne
列表中的 item
对象,并 set/reset 在项目的 onTap
中添加该字段(item.isSelected = !item.isSelected
),然后调用 setState(){}
。当您渲染 item
,而不是 activeColor: Color(0xff53B175)
时,执行类似 activeColor: item.isSelected ? Color(0xff53B175) : Color(0xffffffff)
.
的操作
作为此更改的结果,只要点击一个项目,列表就会重新呈现,呈现时的项目颜色取决于其 'tapped or not' 状态。
如果您不能(或不想)添加字段,您可以创建一个单独的 bool
数组,其长度与 checkBoxListOne
列表相同,并使用它来跟踪选择了哪个项目。
我想更改 ListView
的文本颜色以及复选框,但无法使用 ListView's
选中的项目动态更改文本颜色?
我还在 set State 选项中添加了颜色,但找不到我要找的结果。
这是我的代码:
ListView(
children: [
Text(
''' Categories''',
style: TextStyle(
color: Color(0xff181725),
fontSize: 24,
fontFamily: "Gilroy",
fontWeight: FontWeight.normal,
),
),
SizedBox(height: 13),
...checkBoxListOne.map(
(item) => ListTile(
onTap: () => onAllClicked(item),
leading: Checkbox(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
side: BorderSide(
color: Color(0xffC2C2C2),
width: 2,
),
activeColor: Color(0xff53B175),
value: item.value,
onChanged: (value) => onAllClicked(item),
),
title: Text(
item.title!,
style: TextStyle(
color: Color(0xff181725),
),
),
),
),
SizedBox(height: 40),
Text(
''' Brand''',
style: TextStyle(
color: Color(0xff181725),
fontSize: 24,
fontFamily: "Gilroy",
fontWeight: FontWeight.normal,
),
),
SizedBox(height: 13),
...checkBoxListTwo.map(
(item) => ListTile(
onTap: () => onAllClicked(item),
leading: Checkbox(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
side: BorderSide(
color: Color(0xffC2C2C2),
width: 2,
),
activeColor: Color(0xff53B175),
value: item.value,
onChanged: (value) => onAllClicked(item),
),
title: Text(item.title!),
),
),
],
),
这里是 setState
部分:
onAllClicked(CheckBoxModal ckbItem) { setState(() { ColoredBox( color: Color(0xff53B175), ); ckbItem.value = !ckbItem.value; }); }
您应该将字段 isSelected
添加到 checkBoxListOne
列表中的 item
对象,并 set/reset 在项目的 onTap
中添加该字段(item.isSelected = !item.isSelected
),然后调用 setState(){}
。当您渲染 item
,而不是 activeColor: Color(0xff53B175)
时,执行类似 activeColor: item.isSelected ? Color(0xff53B175) : Color(0xffffffff)
.
作为此更改的结果,只要点击一个项目,列表就会重新呈现,呈现时的项目颜色取决于其 'tapped or not' 状态。
如果您不能(或不想)添加字段,您可以创建一个单独的 bool
数组,其长度与 checkBoxListOne
列表相同,并使用它来跟踪选择了哪个项目。