颤振中的动画可移动列表？

Question

任何提示或帮助我如何在 flutter 中制作这个点击可移动列表？

Answer 1

所提供的组件正是 CupertinoPicker 可以为您提供的。

此外，按照文档中的建议，您应该将 CupertinoPicker 与 showCupertinoModalPopup 结合使用，以在屏幕底部模态显示选择器。

代码可能是这样的：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: PickerPage(),
        ),
      ),
    );
  }
}

class PickerPage extends StatefulWidget {
  const PickerPage();

  @override
  _PickerPageState createState() => _PickerPageState();
}

class _PickerPageState extends State<PickerPage> {
  final _items = [
    'Flat Rate',
    'Hourly',
    'Request for Price',
  ];
  int _selectedItem = 0;

  void _onSelectedItemChanged(int value) => setState(
        () => _selectedItem = value,
      );

  void _showPicker() {
    showCupertinoModalPopup(
      context: context,
      builder: (_) => PickerExample(
        items: _items,
        selectedItem: _selectedItem,
        onSelectedItemChanged: _onSelectedItemChanged,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(_items[_selectedItem]),
        const SizedBox(height: 10.0),
        ElevatedButton(
          child: const Text('Show picker'),
          onPressed: _showPicker,
        ),
      ],
    );
  }
}

class PickerExample extends StatefulWidget {
  final List<String> items;
  final int selectedItem;
  final ValueSetter<int> onSelectedItemChanged;

  const PickerExample({
    required this.items,
    required this.selectedItem,
    required this.onSelectedItemChanged,
  });

  @override
  _PickerExampleState createState() => _PickerExampleState();
}

class _PickerExampleState extends State<PickerExample> {
  late final FixedExtentScrollController _controller;

  @override
  void initState() {
    super.initState();

    _controller = FixedExtentScrollController(initialItem: widget.selectedItem);
  }

  @override
  void dispose() {
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 300,
      child: CupertinoPicker(
        scrollController: _controller,
        backgroundColor: Colors.white,
        itemExtent: 30.0,
        children: [
          for (final item in widget.items) Center(child: Text(item)),
        ],
        onSelectedItemChanged: widget.onSelectedItemChanged,
      ),
    );
  }
}

您还可以在 this DartPad 中找到交互式示例。

颤振中的动画可移动列表？

Animated moveable list in flutter?

flutter

dart

user-interface

flutter-layout

flutter-animation