flutter 是否有与SwitchListTile等效的库比蒂诺版本?

mutmk8jj  于 2023-05-19  发布在  Flutter
关注(0)|答案(6)|浏览(184)

我需要为我的iOS应用程序创建设置页面。在我的Android端,我有SwitchListTile来很好地布局开关。
有没有一个Flutter小部件可以帮助我,或者我必须自己写一个?

ufj5ltwl

ufj5ltwl1#

你必须自己写一个,但是你可以很容易地从SwitchListTile源代码中提取:

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new SafeArea(
          child: new Material(
              child: new ListView(
                children: <Widget>[
                  new CupertinoSwitchListTile(
                    value: _isSelected,
                    onChanged: (value) {
                      print("Value changed to $value");
                      setState(() => _isSelected = value);
                    },
                    activeColor: CupertinoColors.activeGreen
                  )
                ],
              ))),
    );
  }

}

class CupertinoSwitchListTile extends StatelessWidget {
  /// This has been shamelessly copied from Material/SwitchListTile.
  /// The applicable license applies.
  const CupertinoSwitchListTile({
    Key key,
    @required this.value,
    @required this.onChanged,
    this.activeColor,
    this.title,
    this.subtitle,
    this.isThreeLine: false,
    this.dense,
    this.secondary,
    this.selected: false,
  })  : assert(value != null),
        assert(isThreeLine != null),
        assert(!isThreeLine || subtitle != null),
        assert(selected != null),
        super(key: key);

  /// Whether this switch is checked.
  ///
  /// This property must not be null.
  final bool value;

  /// Called when the user toggles the switch on or off.
  ///
  /// The switch passes the new value to the callback but does not actually
  /// change state until the parent widget rebuilds the switch tile with the
  /// new value.
  ///
  /// If null, the switch will be displayed as disabled.
  ///
  /// The callback provided to [onChanged] should update the state of the parent
  /// [StatefulWidget] using the [State.setState] method, so that the parent
  /// gets rebuilt; for example:
  ///
  /// ```dart
  /// new SwitchListTile(
  ///   value: _lights,
  ///   onChanged: (bool newValue) {
  ///     setState(() {
  ///       _lights = newValue;
  ///     });
  ///   },
  ///   title: new Text('Lights'),
  /// )
  /// ```
  final ValueChanged<bool> onChanged;

  /// The color to use when this switch is on.
  ///
  /// Defaults to accent color of the current [Theme].
  final Color activeColor;

  /// The primary content of the list tile.
  ///
  /// Typically a [Text] widget.
  final Widget title;

  /// Additional content displayed below the title.
  ///
  /// Typically a [Text] widget.
  final Widget subtitle;

  /// A widget to display on the opposite side of the tile from the switch.
  ///
  /// Typically an [Icon] widget.
  final Widget secondary;

  /// Whether this list tile is intended to display three lines of text.
  ///
  /// If false, the list tile is treated as having one line if the subtitle is
  /// null and treated as having two lines if the subtitle is non-null.
  final bool isThreeLine;

  /// Whether this list tile is part of a vertically dense list.
  ///
  /// If this property is null then its value is based on [ListTileTheme.dense].
  final bool dense;

  /// Whether to render icons and text in the [activeColor].
  ///
  /// No effort is made to automatically coordinate the [selected] state and the
  /// [value] state. To have the list tile appear selected when the switch is
  /// on, pass the same value to both.
  ///
  /// Normally, this property is left to its default value, false.
  final bool selected;

  @override
  Widget build(BuildContext context) {
    var color =  activeColor ?? Theme.of(context).accentColor;
    print("Active color: ${color.red} ${color.green} ${color.blue}");
    final Widget control = new CupertinoSwitch(
      value: value,
      onChanged: onChanged,
      activeColor: activeColor ?? CupertinoColors.activeGreen,
    );
    return new MergeSemantics(
      child: ListTileTheme.merge(
        selectedColor: activeColor ?? CupertinoColors.activeGreen,
        child: new ListTile(
          leading: secondary,
          title: title,
          subtitle: subtitle,
          trailing: control,
          isThreeLine: isThreeLine,
          dense: dense,
          enabled: onChanged != null,
          onTap: onChanged != null
              ? () {
                  onChanged(!value);
                }
              : null,
          selected: selected,
        ),
      ),
    );
  }
}

正如我在源代码中所指出的,因为它是从flutter源代码中复制的,所以源代码中的license at time of copying适用。

b4qexyjb

b4qexyjb2#

使用SwitchListTile.adaptive小部件代替SwitchListTile小部件

sqougxex

sqougxex3#

从Flutter 2开始,现在有了库比蒂诺的SwitchListTile等价物。
您可以使用CupertinoFormSectionCupertinoFormRowCupertinoSwitch小部件的组合来生成具有iOS分段视觉美学的有效表单字段。

CupertinoFormSection(
  header: Text('Section 1'),
  children: <Widget>[
    CupertinoFormRow(
      child: CupertinoSwitch(
        value: toggleValue,
        onChanged: (value) {
          setState(() {
            toggleValue = value;
          });
        },
      ),
      prefix: Text('Toggle 1'),
      helper: Text('Slide me'),
      error: toggleValue ? null : Text('Not slided'),
    ),
    CupertinoFormRow(
      child: CupertinoSwitch(
        value: !toggleValue,
        onChanged: (value) {
          setState(() {
            toggleValue = value;
          });
        },
      ),
      prefix: Text('Toggle 2'),
    ),
  ],
)

velaa5lx

velaa5lx4#

只需将SwitchListTile更改为ListTile,删除字段“value”和“onchanged”,并将CupertinoSwitch设置为尾随参数。像这样
出发地:

return SwitchListTile(
    title: Text(title),
    subtitle: Text(subTitle),
    value: value,
    onChanged: onChanged);

收件人:

return ListTile(
  title: Text(title),
  subtitle: Text(subTitle),
  trailing: CupertinoSwitch(value: value, onChanged: onChanged),
);

希望能有所帮助。

aiqt4smr

aiqt4smr5#

您可以在ListTile中使用CupertivoSwitch
示例:

class _HomeViewState extends State<HomeView> {
  bool isDarkMode = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: ListView(
          padding: const EdgeInsets.symmetric(vertical: 16),
          children: [
            ListTile(
              title: const Text('Dark Mode'),
              onTap: () {
                setState(() {
                  isDarkMode = !isDarkMode;
                });
              },
              leading: const Icon(Icons.dark_mode),
              trailing:
                  CupertinoSwitch(value: isDarkMode, onChanged: (value) {}),
            ),
          ],
        ));
  }
}

结果:

0mkxixxg

0mkxixxg6#

创建一个如下所示的自定义组件:

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

class CupertinoSwitchListTile extends StatelessWidget {
  const CupertinoSwitchListTile({
    Key key,
    @required this.onChanged,
    @required this.value,
    @required this.text,
  }) : super(key: key);

  final Function onChanged;
  final bool value;
  final String text;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      onTap: onChanged,
      title: Text(text),
      leading: CupertinoSwitch(
        value: value,
        onChanged: (bool isChecked) => onChanged(),
      ),
    );
  }
}

在statefullWidget中声明一个名为boolValue的bool变量后,可以这样使用它:

CupertinoSwitchListTile(
                    onChanged: () {
                      setState(() {
                          boolValue = !boolValue;
                      });
                    },
                    text: 'toggle switch',
                    value: boolValue,
                  )

相关问题