如何在ListWheelScrollView中更改所选项目的颜色？

2024-04-20 • 问答

我有一个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,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属性。可以通过此控制器访问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类型，您可以将其自定义到列表中。

首先需要定义一个状态_selectedItemIndex：

int _selectedItemIndex = 0;

因为 ListwheelScrollView 有一个名为 onSelectedItemChanged 的函数，您可以使用它来突出显示一个项目。

 child: new ListWheelScrollView.useDelegate(
              onSelectedItemChanged: (index) {
                setState(() {
                  _selectedItemIndex = index;
                });
              },

在每次使用上述函数更改索引时设置其状态后，您现在可以更改 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(),)

我只是尝试分析和修复颜色变化的逻辑。我不确定其余的。希望我对你有用。

如何在ListWheelScrollView中更改所选项目的颜色？

xqhong0826 回答：如何在ListWheelScrollView中更改所选项目的颜色？

大家都在问