美文网首页
flutter showModalBottomSheet 底部弹

flutter showModalBottomSheet 底部弹

作者: Faith_K | 来源:发表于2020-03-24 16:10 被阅读0次
Untitled.gif

中间弹出alert https://www.jianshu.com/p/6bb38a7dc9d7

class AlertBottomWidget extends StatelessWidget  {
 final List<String> items ;
 final ValueChanged<int> chooseCallback;

  AlertBottomWidget({this.items,this.chooseCallback});

  List <Widget> itemsWidget(context){

    List <Widget> list =new List();

    for (int i =0;i<items.length;i++){
      list.add( ListTile(
        title: FlatButton(
          child: Text(items[i]),
          onPressed: (){
            chooseCallback(i);
            Navigator.pop(context);
          },
        ),

      ));
      list.add(Divider(height: 1,));
    }

    list.add(SizedBox(child: Container(color: Color(0xffEFEFF4),),height: 8,),);
    list.add(ListTile(
      title: FlatButton(child: Text('取消'),
        onPressed: (){
          Navigator.pop(context);
        },
      ),
    ));
    return list;
  }



  Widget build(BuildContext context) {
    // TODO: implement build
    return   Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: itemsWidget(context),
      ),
    );

  }
}

使用

    showModalBottomSheet(
                    context: context,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadiusDirectional.circular(10)
                    ),
                    builder: (BuildContext context){
                      return AlertBottomWidget(
                        items: ['1','2','3'],
                        chooseCallback: (index){
                          print('当前点击的索引值$index');
                        },
                      );
                    });

相关文章

网友评论

      本文标题:flutter showModalBottomSheet 底部弹

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