Flutter单选选择器插件single_option_picker的使用

你是否曾经希望有一个小部件来简化在多个选项中进行选择的过程？如果是这样，single_option_picker 就是你需要的小部件 :)

基本用法

该小部件非常简单易用。你需要传递选项的数量、一个选项构建器（用于构建选项）、一个当选项被选中时的回调函数，并且需要告知当前选中的选项索引。

SingleOptionPicker(
    numberOfOptions: 3,
    optionBuilder: (index, isSelected) => Container(
        height: 80,
        child: Center(
            child: Icon(
                getIcon(index),
                color: isSelected ? getIconColor(index) : Colors.black,
            ),
        ),
    ),
    onChangeOption: (index) {
        setState(() {
            selectedIndex = index;
        });
    },
    selectedOptionIndex: selectedIndex,
)

最棒的是，OptionBuilder 可以让你自由地实现自己的选项。你可以实现图标、容器等。

建议与问题报告

对于任何建议或错误报告，请前往 问题跟踪器。

以下是一个完整的示例代码，展示了如何使用 single_option_picker 插件：

import 'package:flutter/material.dart';
import 'package:single_option_picker/single_option_picker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 示例1
              SingleOptionPicker(
                numberOfOptions: 3,
                optionBuilder: (index, isSelected) => Container(
                  height: 80,
                  child: Center(
                    child: Icon(
                      getIcon(index),
                      color: isSelected ? getIconColor(index) : Colors.black,
                    ),
                  ),
                ),
                onChangeOption: (index) {
                  setState(() {
                    selectedIndex = index;
                  });
                },
                selectedOptionIndex: selectedIndex,
              ),
              const SizedBox(height: 24),

              // 示例2
              SingleOptionPicker(
                numberOfOptions: 3,
                optionBuilder: (index, isSelected) => AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  height: 80,
                  decoration: BoxDecoration(
                    color: isSelected ? Colors.red : Colors.transparent,
                    border: Border.all(
                      color: Colors.red,
                    ),
                  ),
                  child: Center(
                    child: Text(
                      (index + 1).toString(),
                      style: TextStyle(
                        color: isSelected ? Colors.white : Colors.red,
                      ),
                    ),
                  ),
                ),
                onChangeOption: (index) {
                  setState(() {
                    selectedIndex = index;
                  });
                },
                selectedOptionIndex: selectedIndex,
              ),
              const SizedBox(height: 24),

              // 示例3
              SingleOptionPicker(
                numberOfOptions: 5,
                optionBuilder: (index, isSelected) => AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  height: 80,
                  decoration: BoxDecoration(
                    color: isSelected ? Colors.red : Colors.transparent,
                    border: Border.all(
                      color: Colors.red,
                    ),
                  ),
                  child: Center(
                    child: Text(
                      (index + 1).toString(),
                      style: TextStyle(
                        color: isSelected ? Colors.white : Colors.red,
                      ),
                    ),
                  ),
                ),
                onChangeOption: (index) {
                  setState(() {
                    selectedIndex = index;
                  });
                },
                selectedOptionIndex: selectedIndex,
              ),
              const SizedBox(height: 24),

              // 示例4
              SingleOptionPicker(
                numberOfOptions: 4,
                optionBuilder: (index, isSelected) => AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  height: 80,
                  decoration: BoxDecoration(
                    color: isSelected ? Colors.red : Colors.transparent,
                    border: Border.all(
                      color: Colors.red,
                    ),
                    borderRadius: _getBorderRadius(
                      isFirst: index == 0,
                      isLast: index == 3,
                    ),
                  ),
                  child: Center(
                    child: Text(
                      (index + 1).toString(),
                      style: TextStyle(
                        color: isSelected ? Colors.white : Colors.red,
                      ),
                    ),
                  ),
                ),
                onChangeOption: (index) {
                  setState(() {
                    selectedIndex = index;
                  });
                },
                selectedOptionIndex: selectedIndex,
              ),
              const SizedBox(height: 24),

              // 示例5
              SingleOptionPicker(
                numberOfOptions: 2,
                optionBuilder: (index, isSelected) => AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  height: 80,
                  decoration: BoxDecoration(
                    color: isSelected ? Colors.red : Colors.transparent,
                    border: Border.all(
                      color: Colors.red,
                    ),
                  ),
                  child: Center(
                    child: Text(
                      index == 0 ? 'Good' : 'Bad',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: isSelected ? Colors.white : Colors.red,
                      ),
                    ),
                  ),
                ),
                onChangeOption: (index) {
                  setState(() {
                    selectedIndex = index;
                  });
                },
                selectedOptionIndex: selectedIndex,
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 获取图标
  IconData getIcon(int index) {
    if (index == 0) {
      return Icons.mood_sharp;
    } else if (index == 1) {
      return Icons.money_off_csred_sharp;
    } else {
      return Icons.mood_bad;
    }
  }

  // 获取图标颜色
  Color getIconColor(int index) {
    if (index == 0) {
      return Colors.green;
    } else if (index == 1) {
      return Colors.blue;
    } else {
      return Colors.red;
    }
  }

  // 获取圆角边框
  BorderRadiusGeometry? _getBorderRadius({
    bool? isFirst,
    bool? isLast,
  }) {
    if (isFirst ?? false) {
      return const BorderRadius.only(
        bottomLeft: Radius.circular(8),
        topLeft: Radius.circular(8),
      );
    } else if (isLast ?? false) {
      return const BorderRadius.only(
        bottomRight: Radius.circular(8),
        topRight: Radius.circular(8),
      );
    }
    return null;
  }
}