美文网首页Flutter
flutter CupertinoPicker 选择器 使用

flutter CupertinoPicker 选择器 使用

作者: Faith_K | 来源:发表于2021-07-16 10:23 被阅读0次
image.png

可以复制直接使用,替换text 与color
使用

    CustomPicker.show(context, list: ['男', '女'], onSelectedItemChanged: (v) {},
        confirmClick: (v) {
      print(v);
    });

全部代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zhengda_health/app/custom_widgets/custom_text.dart';
import 'package:zhengda_health/app/support/app_color.dart';
class CustomPicker extends StatelessWidget {
  //数据源
  final List <String> list;

  //确定
  final ValueChanged confirmClick;

  //改变选中回调
  final ValueChanged onSelectedItemChanged;

  //记录选中
  int _current_index = 0;

  CustomPicker(
      {Key key, this.list,
        this.confirmClick,
        this.onSelectedItemChanged})
      : super(key: key);

  //静态构造方法
  static show(BuildContext context,
      {List<String> list,
        ValueChanged onSelectedItemChanged,
        ValueChanged confirmClick }) {

    showModalBottomSheet(
        context: context,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadiusDirectional.circular(10)),
        builder: (BuildContext context) {
          return CustomPicker(
            list:list,
            onSelectedItemChanged :onSelectedItemChanged,
            confirmClick: confirmClick,
          );
        });
  }

  //确定生成回调
  void _confirmClick(BuildContext context ){
    Navigator.of(context).pop();
    confirmClick(_current_index);
  }

  //取消
  void _canlClick(BuildContext context){
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox(height: 8,),
        _headerWidget(context),
        _pickerViewWidget(),
      ],
    ));
  }

  Widget _headerWidget(BuildContext context){
    return Row(
      children: [
        _buttonWidget(title: '取消',textColor: Colors.black38,callback: (){
          _canlClick(context);
        }),
        Expanded(child: Container()),
        _buttonWidget(title: '确定',textColor: Colors.black,callback: (){
          _confirmClick(context);
        }),
      ],
    );
  }

  //piceerView
  Widget _pickerViewWidget(){

    return  SizedBox(
      height: 200,
      child: CupertinoPicker(
          useMagnifier:true,
          magnification:1.2,
          selectionOverlay:_selectionOverlayWidget(),
          itemExtent: 34,
          onSelectedItemChanged: (v){
            _current_index = v;
            onSelectedItemChanged(v);
          },
          children:list.map((e) => _itemsWidget(e)).toList()
      ),
    );
  }

  // 中间分割线
  Widget _selectionOverlayWidget(){
    return Padding(
      padding: EdgeInsets.only(left: 0, right: 0),
      child: Column(
        children: [
          Divider(
            height: 1,
            color: AppColor.green86Color,
          ),
          Expanded(child: Container()),
          Divider(
            height: 1,
            color: AppColor.green86Color,
          ),
        ],
      ),
    );
  }

  // cellItems
  Widget _itemsWidget(e){
    return Container(
      alignment: Alignment.center,
      child:  CustomText(e,fontSize: 14,),
    );
  }

  //公共button
  Widget _buttonWidget({String title ,Color textColor ,VoidCallback callback}){
    return  InkWell(
      onTap: callback,
      child: Container(
        alignment: Alignment.center,
        padding:EdgeInsets.only(left: 16,right: 16),
        height: 40,
        child: CustomText(title,color: textColor,),
      ),
    );
  }

}

相关文章

网友评论

    本文标题:flutter CupertinoPicker 选择器 使用

    本文链接:https://www.haomeiwen.com/subject/ukgvpltx.html