【flutter】可自定义的行值的picker(不是完整代码,只是大致实现代码,伸手党可以出门右转)

就是发现国内大神的flutter_picker不能动态设置行值,都是写死的然后自己结合overlay,大致写了一个原型,原理就是通过provide数据管理器使得页面和picker之间能够交互

import 'dart:async';

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


void main() {
  // 因为overlay属于应用层,所以挂载数据管理器的话就挂载app上
  Providers providers = Providers() 
  ..provide(Provider<SuperPickerController>.value(SuperPickerController()));
  return runApp(
    ProviderNode(
      child: MyApp(),
      providers: providers,
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // overlaySuport为toast和model的插件
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  int count = 0;
  @override
  
  Widget build(BuildContext context) {
    
    Providers providers = Providers()
    ..provide(Provider<SuperPickerController>.value(SuperPickerController()));
    // ()
    //   ..provide(Provider<SuperPickerController>.value(SuperPickerController()));
    return 
    //
      Scaffold(
        body: Center(
          child: RaisedButton(
            child: Text('点我'),
            onPressed: () {
              // SuperPickerController superPickerController = SuperPickerController();
              Toast.show(context: context,onColumnChange: (SuperPickerController model, index) {
                String a = index.toString();
                print('我要改变msg:$a');
                model.setMessage('$a');
              });
            },
          ),
        )
      );
  }
}





///
/// 利用overlay实现Toast
///
///


class Toast {
  static OverlayEntry overlayEntry;
  static ScrollController scrollController;
  static SuperPickerController superPickerController;
  
  static void close() {
    scrollController?.dispose();
    overlayEntry?.remove();
  }
  static void show({@required BuildContext context,Function onColumnChange}) {

    //创建一个OverlayEntry对象
    scrollController = ScrollController();
    
    overlayEntry = OverlayEntry(builder: (context) {
    //外层使用Positioned进行定位,控制在Overlay中的位置
      return SizedBox.expand(
        child: Stack(
          children: <Widget>[
            // 蒙版
            GestureDetector(
              onTap: () {
                Toast.close();
              },
              child: Container(
                color: Color(0x99333333),
              ),
            ),

            Positioned(
              bottom: 0,
              height: 260,
              left: 0,
              right: 0,
              child: Provide<SuperPickerController>(
                builder: (context,child,model) {
                  scrollController.addListener(() {
                    Timer(Duration(milliseconds: 400),() {
                      int index = (scrollController.offset / 40).round();
                        // print(index);
                      scrollController.jumpTo(index * 40.0);
                      onColumnChange(model,index);
                      // print(index);
                    });
                    // scrollController.
                    // scrollController.animateTo(index * 40.0,duration: Duration(milliseconds: 200),du);
                  });
                  return Container(
                    color: Color(0xff666666),
                    child: Column(
                      children: <Widget>[
                        Text(model.message),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            RaisedButton(
                              child: Text('取消'),
                              onPressed: () {
                                // onColumnChange(model);
                              },
                            ),
                            RaisedButton(
                              child: Text('确定'),
                              onPressed: () {
                                // onColumnChange(model);
                              },
                            ),
                          ],
                        ),
                        // 触发改变
                        // 建设column
                        Row(
                          children: <Widget>[
                            SizedBox(
                              height: 210,
                              width: 100,
                              child: ListView.builder(
                                controller: scrollController,
                                itemCount: 26,
                                itemBuilder: (context, index) {
                                  if(index>1 && index < 26 -2) {
                                    return Container(alignment: Alignment.center,height:40,child: Text('${index - 1}',style: TextStyle(color: Colors.blue,fontSize: 20.0),),);
                                  } else {
                                    return Container(alignment: Alignment.center,height:40);
                                  }
                                },
                              ),
                            ),
                            

                            // 右方变换column
                            Container(child: Text('1',style: TextStyle(color: Colors.blue,fontSize: 20.0),),),
                            Container(child: Text('${model.message}',style: TextStyle(color: Colors.blue,fontSize: 20.0),),)
                          ],
                        ),
                      //   // Text('message:'+model.message)
                      ],
                    ),
                  );
                },
              )
              )
          ],
        ),
      );
    });
    Overlay.of(context).insert(overlayEntry);
  }
}

class SuperPickerController extends ChangeNotifier {
  /// 传输的picker数据
  List<List<Map<String, dynamic>>> pickerData = [];
  String message = '';
  void initColumn(List<List<Map<String, dynamic>>> list){
    pickerData = list;
  }

  void setMessage(String msg) {
    print(msg);
    message = msg;
    print('我接受msg:$msg 并通知');
    notifyListeners();
  }

  /// 执行的函数
  void setColumn(int index, List<Map<String, dynamic>> list) {
    // 如果超出长度不执行
    if (index + 1 > list.length) {
      print('不要传入大于初始数组长度:${list.length}的index:$index');
      return;
    } else {

      // 替换
      pickerData[index] = list;
    }
    // 通知替换
    notifyListeners();
  }

  @override
  void dispose() {
    super.dispose();
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值