Flutter新手求助：如何修改CupertinoPicker的样式？

Got it, let's walk through how to tweak your CupertinoPicker to match your design needs—adjusting selected/unselected item styles and divider color is totally doable with a few simple tweaks to your code.

Here's what we'll fix: #

• Selected item: Custom color + larger font size
• Unselected items: Different muted color
• Divider lines: Custom color of your choice

Step-by-Step Solution #

First, we need to track the selected index (to apply different styles to active/inactive items) and use CupertinoTheme to override the default divider color. Here's the modified code tailored to your use case:

1. Add a state variable to track the selected index

Assuming your widget is a StatefulWidget, add this to your state class to keep track of which item is selected:

int _selectedIndex = 0;

2. Update your _showCupertinoPicker method

We'll wrap the picker in a CupertinoTheme to change divider colors, and modify each item's style based on whether it's the selected one:

Widget _showCupertinoPicker(BuildContext context, List<String> orariList) {
  return CupertinoTheme(
    data: CupertinoTheme.of(context).copyWith(
      dividerColor: Colors.grey.shade300, // Replace with your desired divider color
    ),
    child: CupertinoPicker(
      backgroundColor: Colors.white,
      onSelectedItemChanged: (value) {
        setState(() {
          _selectedIndex = value; // Update selected index when user picks an item
        });
      },
      itemExtent: 40.0,
      // Optional: Customize the selection overlay (default is a semi-transparent bar)
      selectionOverlay: CupertinoPickerDefaultSelectionOverlay(
        background: Colors.transparent, // Remove default overlay background if needed
      ),
      children: orariList.asMap().entries.map((entry) {
        final int index = entry.key;
        final String orario = entry.value;
        
        return Center(
          child: Text(
            orario,
            style: TextStyle(
              // Set color based on selection state
              color: index == _selectedIndex 
                  ? CupertinoColors.activeOrange // Selected item color
                  : CupertinoColors.systemGrey, // Unselected item color
              // Set font size based on selection state
              fontSize: index == _selectedIndex ? 18 : 16,
              fontWeight: index == _selectedIndex ? FontWeight.w600 : FontWeight.normal,
            ),
          ),
        );
      }).toList(),
    ),
  );
}

3. Update your Container widget call

Instead of passing pre-built widgets, pass the raw orari list (we'll handle styling inside the picker method now):

Container(
  child: _showCupertinoPicker(
    context,
    book[currentPage].orari, // Pass the raw string list directly here
  ),
)

Key Explanations: #

• Tracking selected index: The _selectedIndex state variable lets us dynamically update styles every time the user selects a new item.
• CupertinoTheme for dividers: CupertinoPicker inherits the theme's dividerColor for its lines, so wrapping it in a custom CupertinoTheme lets us override this without affecting other parts of your app.
• Conditional styling: Using asMap().entries gives us access to each item's index, so we can check if it's the selected one and apply the exact color/font size you want.
• Selection overlay: The selectionOverlay parameter lets you tweak or remove the default semi-transparent bar over the selected item—set it to null if you don't want any overlay at all.

This should give you full control over the picker's appearance to match your app's design!

内容的提问来源于stack exchange，提问作者Simone