Flutter雜症（InkWell,TextField）

前言

這篇文章會記錄一些再使用Flutter提供的Widget開發界面時碰到的一些小問題的解決方案和一些小技巧。在這以前我想說的是Flutter的github倉庫issue中milestones下有一個名爲Golas的milestone，如今解決進度是30%。若是開發的時候碰到一些噁心的問題建議你們先去這裏搜搜，若是發現有相同的問題並且正好是那沒解決的70%。就別在這個問題上耽誤時間了（換別的思路）。

正文

問題：

InkWell設置背景色致使水波紋效果消失

new Container(
  color: Colors.red,
  child: new InkWell(
    onTap: (){},
  ),
);
複製代碼

解決：

這裏問題其實出在了Container上，InkWell其是Material組件。使用Containe的效果實際上是蓋住了Inkwell而不是給InkWell設置了背景色。正確的應該是（相似問題用這個方法大多能夠解決）：

new Material(
  color: Colors.red,
  child: new InkWell(),
)
複製代碼

問題

TextFiled光標問題。看一下致使問題的代碼。

class _MyHomePageState extends State<MyHomePage> {
  var _text = '';

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
          title: new TextField(
        controller: new TextEditingController.fromValue(new TextEditingValue(text: _text)),
        autofocus: true,
      )),
      floatingActionButton: new FloatingActionButton(
        onPressed: () {
          setState(() {
            _text = "flutter";
          });
        },
        tooltip: 'Autocomplete',
        child: new Icon(Icons.add),
      ),
    );
  }
}
複製代碼

再點擊FloatingButton後你會發現光標會在輸入框的最前面。

解決

這個問題卻是不難解決，但總感受怪怪的，每次set一個text還要設置一下光標的位置。

class _MyHomePageState extends State<MyHomePage> {
  var _text = "";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
          title: new TextField(
        controller: new TextEditingController.fromValue(new TextEditingValue(
            text: _text,
            selection: new TextSelection.collapsed(offset: _text.length))),
        autofocus: true,
      )),
      floatingActionButton: new FloatingActionButton(
        onPressed: () {
          setState(() {
            _text = "flutter";
          });
        },
        tooltip: 'Autocomplete',
        child: new Icon(Icons.add),
      ),
    );
  }
}
複製代碼

問題

TextFiled設置TextAlign爲Center和Right光標就會出問題（Center現已修復）

動圖

解決

這個問題就坑爹了。暫時沒有太好的解決方法。有時候UI出了這種設計，能夠參考微信的暱稱修改，點擊跳轉下個界面輸入內容在保存回來。

小技巧

有時候UI出了一個信息錄入頁面，不少錄入項，外觀長都同樣，可是有的是輸入框，有的是點擊選擇。咱們這在時抽取UI的時候可能都會使用TextFiled。但TextField有本身的點擊響應。這時候其實有兩個View來幫助咱們（AbsorbPointer，IgnorePointer）來抵消TextField的點擊響應。

用法：

new AbsorbPointer(
        child: new TextField(
          controller: new TextEditingController(
            text: "flutter",
          ),
        ),
      ),
複製代碼

AbsorbPointer和IgnorePointer的區別，AbsorbPointer自身還能夠響應點擊事件，IgnorePointer自身則不能夠。事例代碼這裏就不展現了，感興趣的朋友那GestureDetector分別包裹AbsorbPointer和IgnorePointer試一下。

最後

文中的問題我會持續關注，有更好的解決辦法會及時更新。