Flutter에서 ListTile 선행 속성에 임의의 색상을 할당하고 있지만 setState를 사용하여 항목을 삭제하면 모든 목록 항목의 색상이 변경되고 ObjectKey ()를 사용하려고 시도했는데 색상 상태를 일정하게 유지하고 싶습니다.
ListTile(
key: ObjectKey(expense),
onTap: () {
setState(() {
_allExpenses.remove(expense);
});
},
leading: CircleAvatar(
radius: 20,
backgroundColor: Color(Random().nextInt(0xffffffff)),
child: FindIcon(expense.type),
),
title: Text("Test"),
)
나는 provider와 notifyListeners (); 모든 항목 삭제시 UI를 다시 빌드합니다.
귀하의 경우에는 setState
매번 다시 빌드됩니다. key
s 로 작업 ListTile
하려면 의 새 래퍼를 만들어야합니다.
그러나 또 다른 대안이 있습니다. 에서 initState
임의의 색상 목록을 만들 수 있습니다.
class MyList extends StatefulWidget {
const MyList({ Key key }) : super(key: key);
@override
_MyListState createState() => _MyListState();
}
class _MyListState extends State<MyList> {
final List<int> _allExpenses = [2, 4, 5, 6, 9, 10, 22];
List<Color> _colors;
@override
void initState(){
super.initState();
_colors = [
for(final _ in _allExpenses)
Color(Random().nextInt(0xffffffff)),
];
}
void removeOne(int index){
setState(() {
_allExpenses.removeAt(index);
_colors.removeAt(index);
});
}
@override
Widget build(BuildContext context) {
return ListView(
children: [
for(int i = 0; i < _allExpenses.length; i++)
ListTile(
//key: ObjectKey(expense),
onTap: () => removeOne(i),
leading: CircleAvatar(
radius: 20,
backgroundColor: _colors[i],
child: Icon(Icons.account_circle),
),
title: Text("Test ${_allExpenses[i]}"),
),
]
);
}
}
임의의 색상에 필요한 메모리를 제어 할 수 있으므로 좋은 대안입니다. 그 논리로 확장 할 수 있습니다 ChangeNotifier
그들의와의 notifyListeners()
사용 addListener()
의를 initState
:
@override initState(){
...
myChangeNotifierList.addListener(() => setState((){}));
}
임의의 색상을 처리하고 각 목록 타일의 상태를 유지하는 책임을 위임하는 또 다른 대안이 있습니다.
class MyListWithKeys extends StatefulWidget {
const MyListWithKeys({ Key key }): super(key: key);
@override
_MyListWithKeysState createState() => _MyListWithKeysState();
}
class _MyListWithKeysState extends State<MyListWithKeys> {
final List<int> _allExpenses = [2, 4, 5, 6, 9, 10, 22];
void removeOne(int expense){
setState(() {
_allExpenses.remove(expense);
});
}
@override
Widget build(BuildContext context) {
return ListView(
children: [
for(final expense in _allExpenses)
MyTile(
key: ObjectKey(expense),
expense: expense,
onTap: () => removeOne(expense),
),
]
);
}
}
class MyTile extends StatefulWidget {
const MyTile({
Key key,
@required this.expense,
@required this.onTap,
}) : assert(expense != null),
assert(onTap != null),
super(key: key);
final int expense;
final VoidCallback onTap;
@override
_MyTileState createState() => _MyTileState();
}
class _MyTileState extends State<MyTile> {
Color _color;
@override
void initState() {
super.initState();
_color = Color(Random().nextInt(0xffffffff));
}
@override
Widget build(BuildContext context) {
return ListTile(
onTap: widget.onTap,
leading: CircleAvatar(
radius: 20,
backgroundColor: _color,
child: Icon(Icons.account_circle),
),
title: Text('Test ${widget.expense}'),
);
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다