Flutter选择组件插件choicechip的使用

Flutter选择组件插件ChoiceChip的使用

在Flutter中，ChoiceChip 是一个用于表示一组选项的选择组件。用户可以选择其中一个选项，并且每个选项可以带有标签或图标。本篇将展示如何使用 ChoiceChip 组件。

示例代码

首先，我们创建一个简单的示例来展示如何使用 ChoiceChip 组件。以下是一个完整的示例代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ChoiceChip 示例'),
        ),
        body: ChoiceChipExample(),
      ),
    );
  }
}

class ChoiceChipExample extends StatefulWidget {
  [@override](/user/override)
  _ChoiceChipExampleState createState() => _ChoiceChipExampleState();
}

class _ChoiceChipExampleState extends State<ChoiceChipExample> {
  String selectedValue = "Apple";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // 显示当前选中的值
          Text("Selected: $selectedValue", style: TextStyle(fontSize: 20)),
          SizedBox(height: 20),

          // ChoiceChip 组件
          ChoiceChip(
            label: Text("Apple"),
            selected: selectedValue == "Apple",
            onSelected: (bool value) {
              setState(() {
                if (value) {
                  selectedValue = "Apple";
                }
              });
            },
          ),
          SizedBox(width: 10),
          ChoiceChip(
            label: Text("Banana"),
            selected: selectedValue == "Banana",
            onSelected: (bool value) {
              setState(() {
                if (value) {
                  selectedValue = "Banana";
                }
              });
            },
          ),
          SizedBox(width: 10),
          ChoiceChip(
            label: Text("Cherry"),
            selected: selectedValue == "Cherry",
            onSelected: (bool value) {
              setState(() {
                if (value) {
                  selectedValue = "Cherry";
                }
              });
            },
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


在Flutter中，ChoiceChip 是一个用于实现选择交互的组件，通常用于表示一组选项中的单个选择。ChoiceChip 是 Chip 组件的一种变体，它可以显示文本、图标，并且可以处理用户的选择和取消选择事件。

基本用法

以下是一个简单的 ChoiceChip 使用示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ChoiceChip Example')),
        body: ChipSelection(),
      ),
    );
  }
}

class ChipSelection extends StatefulWidget {
  @override
  _ChipSelectionState createState() => _ChipSelectionState();
}

class _ChipSelectionState extends State<ChipSelection> {
  String? selectedChoice;

  final List<String> choices = ['Option 1', 'Option 2', 'Option 3'];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: choices.map((choice) {
          return ChoiceChip(
            label: Text(choice),
            selected: selectedChoice == choice,
            onSelected: (bool selected) {
              setState(() {
                selectedChoice = selected ? choice : null;
              });
            },
          );
        }).toList(),
      ),
    );
  }
}

代码解释

  1. ChipSelection 组件: 这是一个 StatefulWidget，用于管理 ChoiceChip 的选择状态。

  2. selectedChoice: 这是一个字符串变量，用于存储当前选择的选项。

  3. choices: 这是一个包含所有选项的列表。

  4. ChoiceChip: 每个 ChoiceChip 都有一个 label，用于显示选项的文本。selected 属性用于确定该 ChoiceChip 是否被选中。onSelected 是一个回调函数，当用户点击 ChoiceChip 时触发。

  5. setState: 当用户选择一个 ChoiceChip 时，调用 setState 来更新 selectedChoice 的值，从而重新构建 UI。

自定义样式

你可以通过 ChoiceChip 的属性来自定义其外观，例如：

  • labelStyle: 用于自定义标签文本的样式。
  • selectedColor: 用于设置选中时的背景颜色。
  • backgroundColor: 用于设置未选中时的背景颜色。
  • shape: 用于设置 ChoiceChip 的形状。
  • avatar: 用于在 ChoiceChip 中添加一个图标或图片。
ChoiceChip(
  label: Text(choice),
  selected: selectedChoice == choice,
  onSelected: (bool selected) {
    setState(() {
      selectedChoice = selected ? choice : null;
    });
  },
  labelStyle: TextStyle(
    color: selectedChoice == choice ? Colors.white : Colors.black,
  ),
  selectedColor: Colors.blue,
  backgroundColor: Colors.grey[300],
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20),
  ),
  avatar: Icon(Icons.check),
)
回到顶部