Flutter选择器插件selector的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter选择器插件selector的使用

selector 是一个用于多平台选择的插件，支持根据不同的平台或设备类型返回相应的值。以下是详细的使用说明和示例代码。

基本选择器 (Basic Selector)

示例代码

String result = selector(
  android: 'hello Android',
  ios: 'hello iOS',
  fuchsia: 'hello Fuchsia',
  linux: 'hello Linux',
  mac: 'hello MacOS',
  windows: 'hello Windows',
);

可选选择器 (Optional Selector)

示例代码

String? result = optionalSelector(
  android: 'hello Android',
  ios: 'hello iOS',
  fuchsia: 'hello Fuchsia',
);

设备选择器 (Device Selector)

示例代码

String result = deviceSelector(
  mobile: 'hello Mobile',
  desktop: 'hello Desktop',
  web: 'hello Web',
);

OrElse选择器 (OrElse Selector)

示例代码

String admobKey = androidOrElse('android-key', 'iOS-key');
String iosPreferredKey = iosOrElse('iOS-key', 'android-key');

查询 (Query)

示例代码

print('isDesktop: $isDesktop');
print('isMobile: $isMobile');

完整示例 Demo

以下是一个完整的 Flutter 应用程序示例，展示了如何使用 selector 插件的不同功能。

lib/main.dart

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:selector/selector.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Platform Selector')),
        body: Builder(builder: (context) => _buildBody(context)),
      ),
    );
  }

  Widget _buildBody(BuildContext context) => Column(
        children: [
          TextButton(
              child: Text('Selector'),
              onPressed: () => _showSnackBar(context, _selector())),
          TextButton(
              child: Text('Device Selector'),
              onPressed: () => _showSnackBar(context, _deviceSelector())),
          TextButton(
              child: Text('Parameter as Function'),
              onPressed: () =>
                  _showSnackBar(context, _functionParameter().toString())),
          TextButton(
              child: Text('Android OrElse'),
              onPressed: () => _showSnackBar(context, _androidOrElse())),
          TextButton(
              child: Text('iOS OrElse'),
              onPressed: () => _showSnackBar(context, _iosOrElse())),
        ],
      );

  void _showSnackBar(BuildContext context, String message) =>
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text(message)));

  String _selector() => selector<String>(
        android: 'hello Android',
        ios: 'hello iOS',
        fuchsia: 'hello Fuchsia',
        linux: 'hello Linux',
        mac: 'hello MacOS',
        windows: 'hello Windows',
      );

  String _deviceSelector() => deviceSelector<String>(
        mobile: 'hello Mobile',
        desktop: 'hello Desktop',
        web: 'hello Web',
      );

  dynamic _functionParameter() => selector<Function(num, num)>(
        android: (a, b) => a + b,
        ios: (a, b) => a * b,
        windows: (a, b) => a / b,
        linux: (a, b) => pow(a, b),
        mac: (a, b) => sqrt(a) * b,
        fuchsia: (a, b) => a - b,
      )(1, 2);

  String _androidOrElse() => androidOrElse<String>('android-admob-id', 'ios-admob-id');

  String _iosOrElse() => iosOrElse<String>('ios-admob-id', 'android-admob-id');
}

这个示例应用程序包含多个按钮，每个按钮点击后会调用不同的选择器方法，并通过 SnackBar 显示结果。希望这些示例能帮助你更好地理解和使用 selector 插件。


更多关于Flutter选择器插件selector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter选择器插件selector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用selector插件的示例代码。请注意，Flutter本身并没有直接名为selector的官方插件，但通常selector可以指代在UI中选择项目的一种机制，比如使用DropdownButton或者showDialog配合选择列表。为了示范，我将使用DropdownButton来模拟一个简单的选择器功能。

首先，确保你的pubspec.yaml文件中包含了Flutter SDK的依赖项（Flutter本身已经包含了所需的UI组件，无需额外插件）。

dependencies:
  flutter:
    sdk: flutter

然后，你可以创建一个包含DropdownButton的Flutter应用。以下是一个完整的示例：

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? _selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Selector Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DropdownButton<String>(
              value: _selectedValue,
              icon: Icon(Icons.arrow_downward),
              iconSize: 24,
              elevation: 16,
              style: TextStyle(color: Colors.deepPurple),
              underline: Container(
                height: 2,
                color: Colors.deepPurpleAccent,
              ),
              onChanged: (String? newValue) {
                setState(() {
                  _selectedValue = newValue;
                });
              },
              items: <String>['Option 1', 'Option 2', 'Option 3']
                  .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
            SizedBox(height: 20),
            Text(
              'You have selected: $_selectedValue',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

  1. MyApp: 应用的根组件，配置了Material主题和首页。
  2. MyHomePage: 首页组件，包含状态管理（_MyHomePageState）。
  3. _MyHomePageState:
    • _selectedValue: 存储当前选中的值。
    • DropdownButton<String>: 创建一个下拉选择器。
      • value: 当前选中的值。
      • icon: 下拉图标。
      • onChanged: 当选中值改变时的回调，更新_selectedValue。
      • items: 下拉选项列表，每个选项是一个DropdownMenuItem。
  4. Text: 显示当前选中的值。

这个示例展示了如何使用DropdownButton在Flutter中创建一个简单的选择器。如果你需要更复杂的选择器功能，可能需要结合使用Dialog、BottomSheet或其他自定义组件。

回到顶部