iOS开发仔在 Flutter 中踩过的坑，持续踩坑中...

本文用以记录我在用flutter中遇到的一些小bug及解决办法

功能型

设计三宝： 圆角，阴影加渐变

实际代码根据参数微调即可

Container(
      margin: EdgeInsets.only(right: 3),
      decoration: BoxDecoration(
          // 圆角， 只设置左上和右下
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(5), bottomRight: Radius.circular(5)),
          // 渐变 上到下
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFF79ACFB),
              Color(0xFF4474F5),
            ],
          ),
          // 阴影 (3, 3) 右下阴影 (-3, 0)  左边阴影，blurRadius 模糊半径
          boxShadow: [
            BoxShadow(
                color: Color(0x10888888), offset: Offset(3, 3), blurRadius: 4),
            BoxShadow(
                color: Color(0x10888888), offset: Offset(-3, 0), blurRadius: 6)
          ]),
      height: 20,
      width: 35,
      child: Center(),
    );

收起键盘

关键代码：FocusScope.of(context).requestFocus(FocusNode());
点击空白区域收起键盘：

GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTap: () {
        // 触摸收起键盘
        FocusScope.of(context).requestFocus(FocusNode());
    },
    child: Container()
) 

Flutter 输入控件TextField设置内容并保持光标(cursor)在末尾

关键代码：

selection: TextSelection.fromPosition(
            TextPosition(
                affinity: TextAffinity.downstream, offset: inputText.length),
          ),

实用代码：

TextField(
      controller: TextEditingController.fromValue(
        TextEditingValue(
          // 设置内容
          text: inputText,
          // 保持光标在最后
          selection: TextSelection.fromPosition(
            TextPosition(
                affinity: TextAffinity.downstream, offset: inputText.length),
          ),
        ),
      ),
    );

输入框文案不居中

关键代码：
textAlignVertical: TextAlignVertical.center,
例子

TextField(
  textAlignVertical: TextAlignVertical.center,
  textAlign: TextAlign.left,
  controller: textController,
   obscureText: false,
   style: TextStyle(fontSize: 15),
   keyboardType: TextInputType.text,
   textInputAction: TextInputAction.search,
   maxLines: 1,
   cursorColor: Argb.theme,
   decoration: InputDecoration(
   border: InputBorder.none,
   hintText: '搜索客户姓名或手机号',
   hintStyle: TextStyle(
     fontSize: 15,
       color: Argb.c88,
      ),
  counterText: "",
      ),
  onSubmitted: (value) {
       keyStr = value;
         _onRefresh();
      },
  onChanged: _onChange,
  )

bug型

iOS通道错误

错误描述：
Unexpectedly found nil while implicitly unwrapping an Optional value: file ../MQDownloadDetailVC.swift, line 62
字面意思，可选类型为空，实际代码
关键代码

open class MQDownloadDetailVC: MQBaseViewController {
    open var filePath = "" {
        didSet {
            rightItemTitle = "分享"
            print("filePath =========== \(filePath)")
            let url = URL(fileURLWithPath: filePath)
            let request = URLRequest(url: url)

            webV.load(request) // 62 行
        }
    }

  var webV: WKWebView!

  override open func viewDidLoad() {
        super.viewDidLoad()
        initViews()
        setupViews()
        bindRx()
    }

  func initViews() {
    webV = {
        let webV = WKWebView()
        webV.scrollView.delegate = self
        webV.scrollView.bounces = false
        webV.navigationDelegate = self
        return webV
    }()
  }
}

此处的nil指的不是 request 而是 webV,之前是用原生的，用nav push 到这个vc, 但是 viewDidLoad 是在push 之后，而我又是先给 filePath 赋的值。故此处 webV 为空。

修正后代码:

/// 需要先有webV
    open var filePath = "" {
        didSet {
            rightItemTitle = "分享"
            print("filePath =========== \(filePath)")
            let url = URL(fileURLWithPath: filePath)
            let request = URLRequest(url: url)

            webV.load(request) // 62 行
        }
    }

lazy var webV: WKWebView = {
        let webV = WKWebView()
        webV.scrollView.delegate = self
        webV.scrollView.bounces = false
        webV.navigationDelegate = self
        return webV
    }()