[Компоненты Flutter] 005-Базовые компоненты: радиоприемники, переключатели и флажки

[Компоненты Flutter] 005-Базовые компоненты: радиоприемники, переключатели и флажки

I. Обзор

Переключатели Switchи флажки в стиле материала имеются в библиотеке компонентов Material Checkbox. Хотя они унаследованы от StatefulWidget, они не сохраняют текущее выбранное состояние, и выбранное состояние управляется родительским компонентом. При нажатии Switchили обратные вызовы, и мы можем обрабатывать выбранную логику изменения состояния в этом обратном вызове.CheckboxonChanged

Когда вам нужно реализовать функцию радио из нескольких вариантов, вы можете использовать Radioи RadioListTileкомпоненты. Эти компоненты позволяют пользователю выбрать один из набора параметров.

2. Основное использование

1. Переключатель

пример кода

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
    
    
  const HomePage({
    
    super.key});

  @override
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
    
    
  bool _value = false;

  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      color: Colors.white,
      child: Center(
        child: Switch(
          value: _value,
          activeColor: Colors.black,
          onChanged: (bool newValue) {
    
    
            setState(() {
    
    
              _value = newValue;
            });
          },
        ),
      ),
    );
  }
}

результат операции

2. Флажок

пример кода

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

class HomePage extends StatefulWidget {
    
    
  const HomePage({
    
    super.key});

  @override
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
    
    
  bool _value1 = false;
  bool _value2 = false;
  bool _value3 = false;
  bool _value4 = false;

  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      color: Colors.white,
      child: Column(
        children: [
          Checkbox(
            value: _value1,
            onChanged: (bool? newValue) {
    
    
              setState(() {
    
    
                _value1 = newValue!;
              });
            },
          ),
          CheckboxListTile(
            title: const Text('Checkbox 2'),
            value: _value2,
            onChanged: (bool? newValue) {
    
    
              setState(() {
    
    
                _value2 = newValue!;
              });
            },
          ),
          CheckboxMenuButton(
              value: _value3,
              onChanged: (bool? newValue) {
    
    
                setState(() {
    
    
                  _value3 = newValue!;
                });
              },
              child: const Text('Checkbox 3')),
          CupertinoCheckbox(
            value: _value4,
            onChanged: (bool? newValue) {
    
    
              setState(() {
    
    
                _value4 = newValue!;
              });
            },
          ),
        ],
      ),
    );
  }
}

результат операции

3. Несколько вариантов

пример кода

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
    
    
  const HomePage({
    
    super.key});

  @override
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
    
    
  String? _selectedOption;

  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          RadioListTile<String>(
            title: const Text('Option 1'),
            value: 'Option 1',
            groupValue: _selectedOption,
            onChanged: (String? newValue) {
    
    
              setState(() {
    
    
                _selectedOption = newValue;
              });
            },
          ),
          RadioListTile<String>(
            title: const Text('Option 2'),
            value: 'Option 2',
            groupValue: _selectedOption,
            onChanged: (String? newValue) {
    
    
              setState(() {
    
    
                _selectedOption = newValue;
              });
            },
          ),
          RadioListTile<String>(
            title: const Text('Option 3'),
            value: 'Option 3',
            groupValue: _selectedOption,
            onChanged: (String? newValue) {
    
    
              setState(() {
    
    
                _selectedOption = newValue;
              });
            },
          ),
        ],
      ),
    );
  }
}

результат операции

4. Несколько вариантов

пример кода

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
    
    
  const HomePage({
    
    super.key});

  @override
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
    
    
  final List<String> _selectedOptions = [];

  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          CheckboxListTile(
            title: const Text('Option 1'),
            value: _selectedOptions.contains('Option 1'),
            onChanged: (bool? value) {
    
    
              setState(() {
    
    
                if (value != null && value) {
    
    
                  _selectedOptions.add('Option 1');
                } else {
    
    
                  _selectedOptions.remove('Option 1');
                }
              });
            },
          ),
          CheckboxListTile(
            title: const Text('Option 2'),
            value: _selectedOptions.contains('Option 2'),
            onChanged: (bool? value) {
    
    
              setState(() {
    
    
                if (value != null && value) {
    
    
                  _selectedOptions.add('Option 2');
                } else {
    
    
                  _selectedOptions.remove('Option 2');
                }
              });
            },
          ),
          CheckboxListTile(
            title: const Text('Option 3'),
            value: _selectedOptions.contains('Option 3'),
            onChanged: (bool? value) {
    
    
              setState(() {
    
    
                if (value != null && value) {
    
    
                  _selectedOptions.add('Option 3');
                } else {
    
    
                  _selectedOptions.remove('Option 3');
                }
              });
            },
          ),
        ],
      ),
    );
  }
}

результат операции