[英]How to change color of selected item in ListWheelScrollView?
我有一个 ListWheelScrollView 小部件。 我需要当我滚动列表时,所选项目的字体颜色会发生变化,例如突出显示。 如何实施?
更新:仍然不知道如何实现这个......
body: new Column(
children: <Widget>[
ListWheelScrollView.useDelegate(
perspective: 0.001,
diameterRatio: 10,
useMagnifier: true,
itemExtent: _itemHeight,
childDelegate: ListWheelChildLoopingListDelegate(
children: _values
.map(
(value) => SizedBox(
width: MediaQuery.of(context).size.width,
height: _itemHeight,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0.0, 0.0, 3),
color: Colors.white,
child: Align(
alignment: Alignment.center,
child: Text(
'$value',
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 17,
color:
Color...,
),
),
),
),
),
),
)
.toList(),
),
)),
],
),
),
);
}
}
ListWheelScrollView
具有FixedExtentScrollController
属性。 可以使用此 controller 到达selectedItem
。
int get selectedItem {
assert(
positions.isNotEmpty,
'FixedExtentScrollController.selectedItem cannot be accessed before a '
'scroll view is built with it.',
);
assert(
positions.length == 1,
'The selectedItem property cannot be read when multiple scroll views are '
'attached to the same FixedExtentScrollController.',
);
final _FixedExtentScrollPosition position = this.position;
return position.itemIndex;
}
它返回 int 类型,您可以将其自定义到您的列表中。
您应该检查该项目是否是从数据源中选择的,并据此更改样式。 类似于下面的代码:
最终 txtStyle = TextStyle(颜色:Colors.white,fontWeight:FontWeight.w400,fontSize:12.0);
最终选定的TxtStyle = TextStyle(颜色:Colors.blue,fontWeight:FontWeight.w600,fontSize:14.0);
body: new Column(
children: <Widget>[
ListWheelScrollView.useDelegate(
perspective: 0.001,
diameterRatio: 10,
useMagnifier: true,
itemExtent: _itemHeight,
childDelegate: ListWheelChildLoopingListDelegate(
children: _values
.map(
(value) => SizedBox(
width: MediaQuery.of(context).size.width,
height: _itemHeight,
child: Container(
margin: EdgeInsets.fromLTRB(0, 0.0, 0.0, 3),
color: Colors.white,
child: Align(
alignment: Alignment.center,
child: Text(
'$value',
textAlign: TextAlign.center,
style: '$selected' ? selectedTxtStyle : txtStyle,
),
),
),
),
),
)
.toList(),
),
)),
],
),
),
);
} }
首先,您需要定义一个 state _selectedItemIndex
:
int _selectedItemIndex = 0;
因为ListwheelScrollView
有一个名为onSelectedItemChanged
的 Function,您可以使用它来突出显示一个项目。
child: new ListWheelScrollView.useDelegate(
onSelectedItemChanged: (index) {
setState(() {
_selectedItemIndex = index;
});
},
在每次使用上面的 function 更改索引的 state 后,您现在可以更改在 childDelegate 中制作的容器中的通过颜色:
childDelegate: ListWheelChildLoopingListDelegate(
children: _values
.map(
(value) => SizedBox(
child: Container(
color: Colors.white,
child: Text(
'$value',
style: TextStyle(
color:
_selectedItemIndex == _values.indexOf(value)
? Colors.pink
: Colors.grey,
),
),
),
),
),
),
.toList(),
)
我只是尝试分析和修复颜色变化的逻辑。 我不确定 rest。 希望我对你有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.