Flutter Listview语言选择需要在选择时进行圆形复选框设计

Posted 2023-02-23

【中文标题】Flutter Listview语言选择需要在选择时进行圆形复选框设计

【英文标题】：Flutter Listview language selection need a circular checkbox design on select

【发布时间】：2020-09-15 16:00:47

【问题描述】：

使用颤振，我正在尝试构建一个语言列表，并且在 listtile 的末尾我需要选择语言的圆形复选框。点击文本或复选框上的任意位置应显示启用状态，再次点击应禁用它。我不确定如何分别处理每个复选框的状态。我也尝试使用 CheckBoxListTile，但我不确定如何实现我想要的。有人可以提供任何例子吗？

查看我的图片here

`

import 'package:basic_utils/basic_utils.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:pankaj_app/config.dart';
import 'package:pankaj_app/model/LanguageModel.dart';
import 'package:shared_preferences/shared_preferences.dart';


class ChooseLanguage extends StatefulWidget 
  ChooseLanguage(Key key, this.language) :super(key: key);
  List<LanguageModel> language;
  @override
  _ChooseLanguageState createState() => _ChooseLanguageState();


class _ChooseLanguageState extends State<ChooseLanguage> 
  int languageIndex = 0;
  bool _isSelected = false;

  @override
  void initState() 

    super.initState();
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text(AppStrings.language)),
      backgroundColor: Color(0xFFfbf5e7),
      resizeToAvoidBottomPadding: false,

      body: Container(child: Container(
          padding:EdgeInsets.all(5),
          child:new Center( 
            child: new FutureBuilder<List<LanguageModel>>(
            future: getlanguage(),
            builder: (context, snapshot) 
              if (snapshot.hasData) 
               if (snapshot.connectionState == ConnectionState.done) 
                return ListView.builder(
                //shrinkWrap: true,
                itemCount: snapshot.data.length,
                itemBuilder: ((context, index) => languageList(
                      list: snapshot.data,
                      index: index,
                    )));
               else 
                return Center(
                  child: CircularProgressIndicator(),
                );
              
              else 
                return Center(
                  child: CircularProgressIndicator(),
                );
              
            ,
          ),

        ),
        ),
        ),

     bottomNavigationBar:BottomAppBar(
       child: Container(
         color: Colors.transparent,
         width: MediaQuery.of(context).size.width,
         height: 60,
         child: FlatButton(
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(0),
             side: BorderSide(color: Colors.blueAccent)),
             color: Colors.purpleAccent,
             textColor: Colors.white,
             padding: EdgeInsets.all(8.0),
             onPressed: () ,
             child: Text("Continue".toUpperCase(),
             style: TextStyle(
             fontSize: 14.0,),),),)
    ),
    );
  

  Widget languageList(List<LanguageModel> list, int index)
      return Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Padding(
            padding: EdgeInsets.all(0),
            child: Ink(
            color: _isSelected ? Colors.blue : Colors.transparent,
            child: new ListTile(
                dense: false,

                title: new Text(list[index].language,
                style: new TextStyle(
                  fontWeight: FontWeight.w600, 
                  fontSize: 16.0,
                  color: Colors.deepPurple),),
                  // trailing: new Row(
                  //   children: <Widget>[
                  //     new Checkbox(
                  //       value: list[index].isCheck, onChanged: (bool value) 
                  //       setState(() 
                  //         list[index].isCheck = value;
                  //       );
                  //     )
                  //   ],
                  // )

                  // GestureDetector(
                  //   child: _isSelected
                  //         ? Icon(
                  //             Icons.favorite,
                  //             color: Colors.red,
                  //           )
                  //         : Icon(
                  //             FontAwesomeIcons.heart,
                  //             color: null,
                  //           ),
                      onTap: () 
                        if(_isSelected)
                          setState(() 
                            _isSelected = true;
                          );
                        
                      
                  //       if (!_isSelected) 
                  //         setState(() 
                  //           _isSelected = true;
                  //         );
                  //         // saveLikeValue(_isLiked);
                  //         // postLike(list[index].reference, currentUser);
                  //        else 
                  //         setState(() 
                  //           _isSelected = false;
                  //         );
                  //         //saveLikeValue(_isLiked);
                  //         // postUnlike(list[index].reference, currentUser);
                  //       
                  //     ),


              ),),
            ),

        ],);



  

`

【参考方案1】：

材料设计没有圆形复选框小部件，您可以为此使用 circular_check_box 库