flutter UI实现

最新推荐文章于 2024-07-15 22:28:19 发布

还未秃的收尾新手

最新推荐文章于 2024-07-15 22:28:19 发布

阅读量480

点赞数

分类专栏： # Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/fearlessnesszhang/article/details/118028489

版权

Flutter 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

页面的跳转

Navigator.push(
  context,   //包含类中的state
  MaterialPageRoute(builder: (context) {
     return QiStatelessApp();    //目标对象
  }),
);

从A页面通过drawer跳转到B页面，B页面点击某个按钮直接回到A页面

Navigator.pop(context);

对于扫描设备会有一进入A页面就进行监听扫描，使用上面的方法无法正确切换扫描，所以需要修改跳转方式，从A页面跳转到B页面
NavigatorUtils.pushPage(
    context: context,
    targPage: TruckNO(
        obj: obj,
        key: key
    )
);

Scaffold
appBar：顶部蓝色区域

return new Scaffold(
    appBar: AppBar(
        //标题居中
        centerTitle: true,
        //标题名称和颜色
        title: Text('My first flutter app',style: TextStyle(color:Colors.white))
    ),
);

drawer和endDrawer分别表示从左边和右边出现的抽屉式控件

return new Scaffold(
    appBar: AppBar(
        centerTitle: true,
        title: Text('My first flutter app',style: TextStyle(color:Colors.white),)
      ), 
       drawer: Drawer(),//会出现三条杠的小图标
       endDrawer: Drawer(),
)

bottomNavigationBar表示底部导航

return new Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('My first flutter app',style: TextStyle(color:Colors.white),)
      ),
        drawer: Drawer(),
        endDrawer: Drawer(),
        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(title: Text('one'),icon: Icon(Icons.home)),
            BottomNavigationBarItem(title: Text('two'),icon: Icon(Icons.book)),
            BottomNavigationBarItem(title: Text('three'),icon: Icon(Icons.perm_identity)),
          ],
        ),
)

floatingActionButton默认位于右下角

return new Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('My first flutter app',style: TextStyle(color:Colors.white),)
      ),
        drawer: Drawer(),
        endDrawer: Drawer(),
        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(title: Text('one'),icon: Icon(Icons.home)),
            BottomNavigationBarItem(title: Text('two'),icon: Icon(Icons.book)),
            BottomNavigationBarItem(title: Text('three'),icon: Icon(Icons.perm_identity)),
          ],
        ),
        floatingActionButton: FloatingActionButton(),
)

设置背景图片

return new Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('My first flutter app',style: TextStyle(color:Colors.white),)
      ),
        key: _scaffoldKey,
        resizeToAvoidBottomPadding: false,
        body: new Stack(children: <Widget>[
          new Container(
            decoration: new BoxDecoration(//背景图片
                image: new DecorationImage(
                    image: new AssetImage('images/bg.jpg'),
                    fit: BoxFit.cover)),
          ),
          new GestureDetector(
            onTap: () {//触摸事件
              FocusScope.of(context).requestFocus(new FocusNode());//移动焦点
            },
          ),
          _buildLogInWidgets(),//类型于方法体
        ]));

点击某个按钮
弹出这个窗口，渲染三行
点击Yes / Cancel执行不同效果

class SettingWord extends StatefulWidget {
  @override
  _SettingWordState createState() => _SettingWordState();
}
 
class _SettingWordState extends State<SettingWord> {
  BuildContext contexst;
  @override
  void initState() {
    contexst = context;
    // TODO: implement initState
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return 
            Scaffold(            backgroundColor: Colors.white,
 
            resizeToAvoidBottomInset: false,
            appBar: AppBar(
         toolbarHeight: ScreenUtil().setHeight(60),
                elevation: 0, //隐藏底部阴影分割线
                backgroundColor: PColor.white_ffffff,
                centerTitle: true,
                title: Text(
                  "Setting",
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(16),
                      fontWeight: FontWeight.bold,
                      color: PColor.color_707070),
                ),
            ),
            body: Container(
                child: Column(
              children: [
                SizedBox(
                  height: 10,
                ),
                Container(
                   child: Column(
                    children: [
                //Divider(height: 1,color: Colors.black.withOpacity(0.1),),
                //按钮
                GestureDetector(
                  child: Container(
                    height: ScreenUtil().setHeight(46),
                    alignment: Alignment.center,
                    margin: const EdgeInsets.only(
                        top: 30, left: 15, right: 15, bottom: 30),
                    decoration: BoxDecoration(
                      //背景
                      //color: PColor.yelow_f08b38,
                      border: Border.all(
                          color: PColor.btn_border_E2E2E2, width: 1), //边框
                      //设置四周圆角 角度
                      borderRadius: BorderRadius.all(Radius.circular(5.0)),
                    ),
                    child: Text(
                      'Log Out',
                      style: TextStyle(
                          fontSize: ScreenUtil().setSp(14),
                          color: PColor.color_707070),
                    ),
                  ),
                  onTap: () {
                    //出现弹窗
                    showDialog(
                        context: context,
                        barrierDismissible: true,
                        builder: (BuildContext context) {
                          return ShowDialog(
                              child: _optionContent()
                          );
                        });
                  },
                ),
              ],
            )),
          );
        
  }
 
//渲染三行数据
  Widget _optionContent() {
    return Center(
        child: Container(
          constraints: BoxConstraints(
            minWidth: ScreenUtil().setWidth(223),
          ),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
              color: Colors.white
          ),
          height: ScreenUtil().setHeight(145),
          width: ScreenUtil().setWidth(273),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              _optionItem('Are you sure to log out?'),
              _optionItem1('Yes'),
              _optionItem('Cancel')
            ],
          ),
        ));
  }
 
  //可改进 => 目前处理方式  第一行和第三行不设置border，中间设置上下border样式
  Widget _optionItem(String type) {
    return Container(
        height: ScreenUtil().setHeight(45),
        width: ScreenUtil().setWidth(273),
        alignment: Alignment.center,
        child: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            if (type == "Yes") {
              CommonUtils.showToast(context, 'Log out Success');
              NavigatorUtils.pushAndRemoveUntil(context, loginView());
            }
            if (type == "Cancel") {
              Navigator.pop(contexst);
            }
          },
          child: Row(
            children: [
              Expanded(
                child: Container(
                  child: Text("${type}",
                    style:TextStyle(
                        fontSize: ScreenUtil().setSp(15),
                        color: PColor.color_707070
                    ),
                    textAlign: TextAlign.center,
                  ),
                  alignment: Alignment.center,
                ),
              )
            ],
          ),
        ));
  }
 
  Widget _optionItem1(String type) {
    return Container(
        decoration: BoxDecoration(
            border: Border(bottom: BorderSide(width: 1,color: Color(0xFFEAEAEA)),top: BorderSide(width: 1,color: Color(0xFFEAEAEA))),
            color: Colors.white
        ),
        height: ScreenUtil().setHeight(45),
        width: ScreenUtil().setWidth(273),
        alignment: Alignment.center,
        child: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            if (type == "Yes") {
              //延迟一秒返回主界面
              Future.delayed(Duration(seconds: 1), () {
                CommonUtils.showToast(context, 'Log out Success');
                NavigatorUtils.pushAndRemoveUntil(context, loginView());
              });
            }
            if (type == "Cancel") {
              Navigator.pop(contexst);
            }
          },
          child: Row(
            children: [
              Expanded(
                child: Container(
                  child: Text("${type}",
                      style:TextStyle(
                        fontSize: ScreenUtil().setSp(15),
                        color: PColor.color_707070
                      ),
                    textAlign: TextAlign.center,
                  ),
                  alignment: Alignment.center,
                ),
              )
            ],
          ),
        ));
  }
}

其中分割线现在是将中间一行的上下设置border，另外两个不设置；其中使用时出现了高度问题，所以才改用的，这里代码大部分重复可改进。

在一个页面需要退出的时候，大部分需要有个弹窗提示是否需要退出？选择是/否

class _home_pageState extends State<home_page> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // drawer: ScreeningDrawerView(nmodel),
      body: Stack(overflow: Overflow.visible, children: [
        Positioned(top: ScreenUtil().setHeight(55), right: 15, child: _close()),
        Container(
            color: Colors.white,
            margin: EdgeInsets.only(top: ScreenUtil().setHeight(330)),
            child: Container(
              //child: _content(widget.model),
              margin: EdgeInsets.only(
                  left: 20, right: 20),
            )),
      ]),
    );
  }
 
  _close(){
    return GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          showDialog(//提示弹窗
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('Tips'),
                  content: Text('Confirm Sign Out'),
                  actions: <Widget>[
                    FlatButton(
                      child: Text('Cancel'),
                      onPressed: () {//cancel则注销当前弹窗
                        Navigator.of(context).pop('Cancel');
                      },
                    ),
                    FlatButton(
                      child: Text('Ok'),
                      onPressed: () {//ok则跳转页面
                        NavigatorUtils.pushAndRemoveUntil(
                            context, login_page());
                      },
                    ),
                  ],
                );
              });
        },
        child: Container(
          child: Image.asset(
            MyImage.logout,
            width: ScreenUtil().setWidth(24),
          ),
        ));
  }
}

记录一个展示图片和拍照的插件 image_picker

添加依赖在pubspec.yaml中添加image_picker的依赖
直接import就可以使用
使用 => 找的网上一个简单demo，我这个比较复杂

原文地址：https://blog.csdn.net/yuzhiqiang_1993/article/details/88345232

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
 
class ImagePickerWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ImagePickerState();
  }
}
 
class _ImagePickerState extends State<ImagePickerWidget> {
  var _imgPath;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("ImagePicker"),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              _ImageView(_imgPath),
              RaisedButton(
                onPressed: _takePhoto,
                child: Text("拍照"),
              ),
              RaisedButton(
                onPressed: _openGallery,
                child: Text("选择照片"),
              ),
            ],
          ),
        ));
  }
 
  /*图片控件*/
  Widget _ImageView(imgPath) {
    if (imgPath == null) {
      return Center(
        child: Text("请选择图片或拍照"),
      );
    } else {
      return Image.file(
        imgPath,
      );
    }
  }
 
  
  /*拍照*/
  _takePhoto() async {
    var image = await ImagePicker.pickImage(source: ImageSource.camera);
 
    setState(() {
      _imgPath = image;
    });
  }
 
  /*相册*/
  _openGallery() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _imgPath = image;
    });
  }
}

chart图表，这几天被搞炸裂了。。所以记录一下
简单的实现可以参照官网： charts_flutter | Flutter Package

我主要记录这几天在完成的一个界面，横着的柱状图并分组显示

import 'package:flutter/material.dart';
import 'package:kerriertrack/utils/pub_utail.dart';
import 'package:kerriertrack/viewmodels/newhome_page_model.dart';
import 'package:provider/provider.dart';
import 'package:kerriertrack/widget/my_card.dart';
import 'package:kerriertrack/res/colors.dart';
import 'package:charts_flutter/flutter.dart' as charts;

class Co2DestinationView extends StatefulWidget {
  @override
  _Co2_ViewState createState() => _Co2_ViewState();
}

class _Co2_ViewState extends State<Co2DestinationView> {
  @override
  Widget build(BuildContext context) {
    return Consumer<NewHomePageViewModel>(
        builder: (context, prodata, child) {
          return Container(
              color: Colors.white,
              padding: EdgeInsets.all(10),
              child: Container(
                child: Column(
                  //外边框的实现
                  children: <Widget>[
                    actionTitleWidget("TOP 10 CO2 Emission by Destination"),
                    Container(
                      height: 400,
                      //图标内容，其中prodata是从父页面传过来的model，其中已经请求接口并返回entity
                      child: _StatisticsDestinationBarItem(prodata),
                    )
                  ],
                ),
              )
            );
        }
    );
  }

  Widget getDestinationBar(NewHomePageViewModel model) {
    //组装数据，我清楚我有两组数据，所以就声明了两个数组来装数据
    if(model.co2emissionByDestinationEntity != null){
      var destinationData = model.co2emissionByDestinationEntity.data.data;
      List<Co2> co2_destination_air = [];
      List<Co2> co2_destination_sea = [];

      //循环接口中的数据进行保存
      for(var i = 0;i<destinationData.length;i++){
        if(destinationData[i].transportMode == "AIR"){
          co2_destination_air.add(new Co2(destinationData[i].podLocCode, destinationData[i].co2Emission));
        }else if(destinationData[i].transportMode == "SEA"){
          co2_destination_sea.add(new Co2(destinationData[i].podLocCode, destinationData[i].co2Emission));
        }
      }

      //渲染柱状图
      var destinationBar = [
        charts.Series(
          data: co2_destination_air,
          domainFn: (Co2 co2, _) => co2.locCode,//横坐标
          measureFn: (Co2 co2, _) => co2.co2Number,//纵坐标
          id: "AIR",
          colorFn: (Co2 clickData, _) => charts.ColorUtil.fromDartColor(PColor.color8D6446),//字体颜色
          fillColorFn: (Co2 co2, _){
            return charts.ColorUtil.fromDartColor(PColor.color8D6446);//柱状图填充颜色
          },
            labelAccessorFn: (Co2 co2, _) => '${co2.co2Number}',//字符内容
        ),
        charts.Series(
          data: co2_destination_sea,
          domainFn: (Co2 co2, _) => co2.locCode,
          measureFn: (Co2 co2, _) => co2.co2Number,
          id: "SEA",
          colorFn: (Co2 clickData, _) => charts.ColorUtil.fromDartColor(PColor.top_F39200),
          fillColorFn: (Co2 co2, _){
            return charts.ColorUtil.fromDartColor(PColor.top_F39200);
          },
            labelAccessorFn: (Co2 co2, _) => '${co2.co2Number}',
        )
      ];

      //渲染柱状图
      return charts.BarChart(
        destinationBar,
        animate: true,//有一定的动态效果
        vertical: false,//从纵向变成横向
        //显示两组数据，在我放的图最下面那种标记
        behaviors: [
        new charts.SeriesLegend(
            position: charts.BehaviorPosition.bottom, desiredMaxRows: 2),
        ],
        //需要显示在柱状图的文字样式
        barRendererDecorator: new charts.BarLabelDecorator(labelPadding:20,),
        //横坐标
        domainAxis: new charts.OrdinalAxisSpec(),
        primaryMeasureAxis: new charts.NumericAxisSpec(
          showAxisLine: false,
          renderSpec: charts.GridlineRendererSpec(
            tickLengthPx:5, // 刻度标识突出的长度
            labelOffsetFromAxisPx: 12, // 刻度文字距离轴线的位移
          ),
        ),
      );
    }
  }

  Widget _StatisticsDestinationBarItem(NewHomePageViewModel model) {
    return Container(
      child: getDestinationBar(model),
      //渲染的边框颜色与样式
      decoration: BoxDecoration(
        borderRadius: new BorderRadius.only(
            bottomLeft: Radius.circular(15), bottomRight: Radius.circular(15)),
        border: Border(
          // 四个值 top right bottom left
            top: BorderSide(
              // 设置单侧边框的样式
                color: Color(0xffEDEDED),
                width: 1,
                style: BorderStyle.solid),
            bottom: BorderSide(
              // 设置单侧边框的样式
                color: Color(0xffEDEDED),
                width: 1,
                style: BorderStyle.solid),
            left: BorderSide(
              // 设置单侧边框的样式
                color: Color(0xffEDEDED),
                width: 1,
                style: BorderStyle.solid),
            right: BorderSide(
              // 设置单侧边框的样式
                color: Color(0xffEDEDED),
                width: 1,
                style: BorderStyle.solid)),
      ),
    );
  }
}

//声明对象，保存字段
class Co2 {
  String locCode;
  double co2Number;
  Co2(this.locCode, this.co2Number);
}

客户又说要改，要从大到小排序，两种类型要重叠显示，数据又要显示出来。。最终效果是

其中HKHKG是有重叠的，但是因为数据量差距太大，所以不是很明显，只能从下方查看数据和类型。

import 'package:flutter/material.dart';
import 'package:kerriertrack/utils/pub_utail.dart';
import 'package:kerriertrack/viewmodels/newhome_page_model.dart';
import 'package:provider/provider.dart';
import 'package:kerriertrack/widget/my_card.dart';
import 'package:kerriertrack/res/colors.dart';
import 'package:charts_flutter/flutter.dart' as charts;

class Co2DepatrueView extends StatefulWidget {
  @override
  _Co2_ViewState createState() => _Co2_ViewState();
}

class _Co2_ViewState extends State<Co2DepatrueView> {
  //首先声明两种类型的属性字段，一个code字段
  double Air_num = 0.00;
  double Sea_num = 0.00;
  String depLocCode = "-";
  @override
  Widget build(BuildContext context) {
    return Consumer<NewHomePageViewModel>(
        builder: (context, prodata, child) {
          return Container(
              padding: EdgeInsets.all(10),
              child: Container(
                color: Colors.white,
                child: Column(
                  children: <Widget>[
                    actionTitleWidget("TOP 10 CO2 Emission by Departure"),
                    Container(
                      child: _StatisticsDepartureBarItem(prodata),
                    )
                  ],
                ),
              )
            );
        }
    );
  }

  //加载图表内容，其中model是接口返回的数据
  Widget getDepartureBar(NewHomePageViewModel model) {
    if(model.co2EmissionByDepartureEntity != null){
      var departureData = model.co2EmissionByDepartureEntity.data.data;
      List<Co2> co2_all = [];
      //1.先循环所有数据，根据code，number相加
      for(var i = 0;i<departureData.length;i++) {
        bool same = false;
        if (co2_all.length == 0) {
          co2_all.add(new Co2(
              departureData[i].depLocCode, departureData[i].co2Emission));
        } else {
          for (var j = 0; j < co2_all.length; j++) {  
            if (departureData[i].depLocCode == co2_all[j].locCode) {
              same = true;
              co2_all[j] = new Co2(departureData[i].depLocCode,
                  departureData[i].co2Emission + departureData[j].co2Emission);
            }
          }
          if(!same){
            co2_all.add(new Co2(
                departureData[i].depLocCode, departureData[i].co2Emission));
          }
        }
      }

      //2.将上面已经去重list根据number进行排序
      co2_all.sort((a, b) => (b.co2Number).compareTo(a.co2Number));

      List<Co2> co2_departure_air = [];
      List<Co2> co2_departure_sea = [];
      //3.图表需要重叠，所以需要两个数组来装数据，所以初始化两个类型数组，其中的number赋值0.00
      for(var i = 0;i<co2_all.length;i++){
        co2_departure_air.add(new Co2(co2_all[i].locCode, 0.00));
        co2_departure_sea.add(new Co2(co2_all[i].locCode, 0.00));
      }

       //4.循环model的数据，并且循环去重后的数据，只要code相等，就判断mode的值，在分别对两个类型数组进行赋值
      for(var i = 0;i<departureData.length;i++){
        for(var j = 0;j<co2_all.length;j++){
          if(departureData[i].depLocCode == co2_all[j].locCode){
            if(departureData[i].transportMode == "AIR"){
              co2_departure_air[j] = new Co2(co2_all[j].locCode, co2_departure_air[j].co2Number + departureData[i].co2Emission);
              co2_departure_sea[j] = new Co2(co2_all[j].locCode, co2_departure_sea[j].co2Number);
            }else if(departureData[i].transportMode == "SEA"){
              co2_departure_air[j] = new Co2(co2_all[j].locCode,  co2_departure_air[j].co2Number);
              co2_departure_sea[j] = new Co2(co2_all[j].locCode,  co2_departure_sea[j].co2Number + departureData[i].co2Emission);
            }
            break;
          }
        }
      }

      //5.渲染图表，并且添加点击柱状图事件，取柱状图的code，两个类型的值
      var departureBar = [
        charts.Series(
          data: co2_departure_air,
          domainFn: (Co2 co2, _) => co2.locCode,
          measureFn: (Co2 co2, _) => co2.co2Number,
          id: "AIR",
          colorFn: (Co2 clickData, _) => charts.ColorUtil.fromDartColor(PColor.color8D6446),
          fillColorFn: (Co2 co2, _){
            return charts.ColorUtil.fromDartColor(PColor.color8D6446);
          }
        ),
        charts.Series(
          data: co2_departure_sea,
          domainFn: (Co2 co2, _) => co2.locCode,
          measureFn: (Co2 co2, _) => co2.co2Number,
          id: "SEA",
          colorFn: (Co2 clickData, _) => charts.ColorUtil.fromDartColor(PColor.top_F39200),
          fillColorFn: (Co2 co2, _){
            return charts.ColorUtil.fromDartColor(PColor.top_F39200);
          }
        )
      ];
      return SizedBox(height: 400, child:charts.BarChart(
        departureBar,
        animate: true,
        vertical: false,
        barGroupingType: charts.BarGroupingType.stacked,
        selectionModels: [
          new charts.SelectionModelConfig(
            type: charts.SelectionModelType.info,
            changedListener: _onSelectionChanged,
          )
        ],
      ));
    }
  }

  //6.赋值
  void _onSelectionChanged(charts.SelectionModel model){
    setState(() {
      this.depLocCode = model.selectedDatum[0].datum.locCode;
      if(model.selectedDatum[0].series.displayName == "AIR"){
        this.Air_num = model.selectedDatum[0].datum.co2Number;
        this.Sea_num = model.selectedDatum[1].datum.co2Number;
      }else{
        this.Sea_num = model.selectedDatum[0].datum.co2Number;
        this.Air_num = model.selectedDatum[1].datum.co2Number;
      }
    });
  }

  Widget _StatisticsDepartureBarItem(NewHomePageViewModel model) {
    //用一个column放图表和最下方的内容
    return Container(
      height: 450,
      child: Column(
        children: [
          getDepartureBar(model),
          new Padding(
              padding: new EdgeInsets.only(top: 5.0),
              child: Wrap(children: [
                new Text("   DepLocCode:${this.depLocCode}   ",),
                new Text("AIR:${this.Air_num}   ",style: TextStyle(color: PColor.color8D6446),),
                new Text("SEA:${this.Sea_num}   ",style: TextStyle(color: PColor.top_F39200),)
              ],)),
        ],
      ),
      decoration: BoxDecoration(
        borderRadius: new BorderRadius.only(
            bottomLeft: Radius.circular(15), bottomRight: Radius.circular(15)),
        border: Border(
          // 四个值 top right bottom left
            top: BorderSide(
              // 设置单侧边框的样式
                color: Color(0xffEDEDED),
                width: 1,
                style: BorderStyle.solid),
            bottom: BorderSide(
              // 设置单侧边框的样式
                color: Color(0xffEDEDED),
                width: 1,
                style: BorderStyle.solid),
            left: BorderSide(
              // 设置单侧边框的样式
                color: Color(0xffEDEDED),
                width: 1,
                style: BorderStyle.solid),
            right: BorderSide(
              // 设置单侧边框的样式
                color: Color(0xffEDEDED),
                width: 1,
                style: BorderStyle.solid)),
      ),
    );
  }
}

class Co2 {
  String locCode;
  double co2Number;
  Co2(this.locCode, this.co2Number);
}

有些输入框只输入数字，所以需要加上特定的标签

TextField(
    keyboardType: TextInputType.number,//指定打开数字键盘
    decoration: InputDecoration(
        border: InputBorder.none,
        hintStyle: TextStyle(//默认值的样式
            color: PColor.color_707070,
            fontSize: ScreenUtil().setSp(14)),
        )
    )
)

但是在网上搜索IOS13才支持直接显示数字键盘，IOS12及以下都不支持，且有些安卓系统也不支持。左边为IOS12,右边为IOS13

对扫描设备上的返回键进行监听 willPopScope

return WillPopScope(onWillPop: () async{
           setError("OPLT 未完成!  是否儲存及返回");
        },child: Dialog(
          child: Container(
            height: 130,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(12.0)),
              color: Colors.white,
            ),
            child: Column(
              children: [
                SizedBox(height: 10),
                Visibility(
                  visible: isSn,
                  child: Text(
                    scanList[scanIndex].sku,
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                ),
                Text(
                  '${scanList[scanIndex].qty == null?0:scanList[scanIndex].qty}/${scanPackQty}',
                  style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ),
        )

大概效果是：点击返回键会有个一个小弹框

在与后台数据进行比较时，如果有重复数据则需要弹出一个弹框

其中包括一个标题，图标，list

await showDialog(
      context: context,
      barrierDismissible: false, //点击外部遮罩区域是否可以关闭dialo
      builder: (context) {
        return Dialog(
          child: Container(
            height: 300,
            width: 320,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(12.0)),
              color: Colors.white,
            ),
            child:
                  Stack(
                    children: [
                      Positioned(
                        top: 10,
                        left: 0,
                        child: Container(
                          width: 240,
                          alignment: Alignment(0, 0),
                          child: Text(
                            "通知",
                            style:
                            TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                          ),
                        ),
                      ),
                      Positioned(
                          top: 50,
                          left: 8,
                          child: Container(
                            width: 220,
                            child: Column(
                              mainAxisSize:MainAxisSize.min,
                              children: 
                                [
                                    Row(
                                      children: [
                                          const Icon(
                                              IconData(0xe61f, fontFamily: 'IconFont'),
                                              color: Color.fromRGBO(237, 109, 1, 1),
                                            ),
                                    SizedBox(width: 6),
                                    Expanded(
                                      child: Text(
                                        "图标后的内容",
                                        style: TextStyle(fontSize: 16, fontWeight:         FontWeight.w400),
                                          ),
                                    )
                              ],
                                ),//list在一个固定高度区域渲染
                        Scrollbar(isAlwaysShown: true,child: Container(height:90,margin:                 EdgeInsets.only(left: 30),child: ListView.builder(
                          scrollDirection: Axis.vertical,
                          shrinkWrap:true,
                          itemCount: snList.length,
                          itemBuilder: (BuildContext context, int index) {
                        return Container(child: Text(snList[index],style: TextStyle(fontSize: 15, fontWeight: FontWeight.w400)),);
                          },
                        ),),)
                        ,
                  Container(child: Row(
                      children: [
                        Text(
                          "A:",
                          style: TextStyle(fontSize: 15),
                        ),
                    SizedBox(width: 6,),
                    Expanded(child: Text(
                      "A的内容",
                      maxLines: 5,
                      style: TextStyle(fontSize: 15, fontWeight: FontWeight.w400),
                    ))
                  ],
                ),),
                Container(
                     child: Row(
                        children: [
                          Text(
                            "B:",
                            style: TextStyle(fontSize: 15),
                          ),
                          SizedBox(width: 6,),
                          Expanded(child: Text(
                            "B的内容",
                            maxLines: 5,
                            // overflow: TextOverflow.ellipsis,
                            style: TextStyle(fontSize: 15, fontWeight: FontWeight.w400),
                          ),)
                        ],
                          )
                            )
                          ],
                            ),
                          )),
                      Positioned(
                        bottom: 10,
                        left: 8,
                        child: Container(
                          width: 220,
                          height: 40,
                          child: RaisedButton(
                            onPressed: () {
                                //关闭弹框
                              Navigator.of(context).pop('cancel');
                            },
                            color: Color.fromRGBO(237, 109, 1, 1),
                            child: Text(
                              "Confirm",
                              style: TextStyle(
                                fontSize: 18,
                                color: Color.fromRGBO(255, 255, 255, 1),
                              ),
                            ),
                          ),
                        ),
                      )
                    ],
            ),
          ),
        );
      },
    );