美文网首页Flutter
flutter showGeneralDialog Dialog

flutter showGeneralDialog Dialog

作者: Faith_K | 来源:发表于2021-05-17 15:22 被阅读0次

    1.目前常用的是 我们新建一个组件继承与 Dialog ,Dialog 继承与 StatelessWidget组件 StatelessWidget是不支持 setState(() {});
    当我们弹框上需用动态改变状态的时候,我们可以直接继承StatefulWidget 这样也同样可以 弹框,不用在麻烦使用 StatefulBuilder

    image.png
    范例 
    
    调用 
    
        showGeneralDialog(
            context: context,
            pageBuilder: (context, anim1, anim2) {},
            transitionBuilder: (context, anim1, anim2, child)  {
              return Transform.scale(
                  scale: anim1.value,
                  child: Opacity(
                      opacity: anim1.value,
                      child: AlertView()
                  ));
            });
    
    import 'package:flutter/material.dart';
    class AlertView extends StatefulWidget {
      @override
      _AlertViewState createState() => _AlertViewState();
    }
    
    class _AlertViewState extends State<AlertView> {
    
      bool isSelected =false;
      void _onCheckbox(value){
        isSelected =! isSelected;
        setState(() {});
      }
    
      @override
      Widget build(BuildContext context) {
        return Material(
          color: Colors.transparent,
          shadowColor: Colors.transparent,
          child: Center(
            child: Container(
              margin: EdgeInsets.only(left: 40,right: 40),
              padding: EdgeInsets.only(top: 16,bottom: 8),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.white,
              ),
              child:Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('温馨提示')
                    ],
                  ),
                  Checkbox(value:isSelected, onChanged:_onCheckbox),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(child: _buttonView(text: '取消',onTap: (){})),
                      Expanded(child: _buttonView(text: '确定',onTap: (){})),
                    ],
                  )
    
                ],
              ),
            ),
          ),
        );
      }
      Widget _buttonView({String text, Color color, VoidCallback onTap}) {
        return InkWell(
          onTap: onTap,
          child: Container(
            alignment: Alignment.center,
            height: 42,
            child: Text(
              text??'',
          ),
        ));
      }
    }
    
    

    相关文章

      网友评论

        本文标题:flutter showGeneralDialog Dialog

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