Flutter杂症(InkWell,TextField)

栏目: IOS · Android · 发布时间: 5年前

内容简介:这篇文章会记录一些再使用Flutter提供的Widget开发界面时碰到的一些小问题的解决方案和一些小技巧。在这之前我想说的是Flutter的github仓库issue中milestones下有一个名为InkWell设置背景色导致水波纹效果消失这里问题其实出在了Container上,InkWell其是Material组件。使用Containe的效果其实是盖住了Inkwell而不是给InkWell设置了背景色。正确的应该是(类似问题用这个方法大多可以解决):

这篇文章会记录一些再使用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现已修复)

Flutter杂症(InkWell,TextField)
动图

解决

这个问题就坑爹了。暂时没有太好的解决方法。有时候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试一下。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

首席增长官

首席增长官

张溪梦 / 机械工业出版社 / 2017-11-1 / 69.9

增长是企业永恒的主题,是商业的本质。 人口红利和流量红利的窗口期正在关闭,曾经“流量为王”所带来的成功经验正在失效,所造成的思维逻辑和方法论亟待更新。在互联网下半场,企业要如何保持增长?传统企业是否能跟上数字化转型的脚步,找到新兴业务的增长模式?为什么可口可乐公司用首席增长官取代了首席营销官职位? 数据驱动增长正在成为企业发展的必需理念,首席增长官、增长团队和增长黑客将是未来商业的趋势......一起来看看 《首席增长官》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具