如何更改 ListWheelScrollView 中所選項目的顏色？

Question

我有一個 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(),
                  ),
                )),
          ],
        ),
      ),
    );
  }
}

Answer 1

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 類型，您可以將其自定義到您的列表中。

Answer 2

您應該檢查該項目是否是從數據源中選擇的，並據此更改樣式。 類似於下面的代碼：

最終 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(),
              ),
            )),
      ],
    ),
  ),
);

} }

Answer 3

首先，您需要定義一個 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。 希望我對你有用。