首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

setState不会改变TextField的装饰

setState是Flutter框架中的一个方法,用于更新Widget的状态并重新构建UI。它通常用于响应用户交互或数据变化,以更新UI的显示。

在Flutter中,TextField是一个常用的输入框控件,用于接收用户的文本输入。TextField的装饰包括边框、背景色、提示文本等,可以通过设置decoration属性来自定义。

当调用setState方法时,Flutter会重新调用build方法来重新构建UI。但是,setState方法只会触发Widget的重建,不会改变TextField的装饰。也就是说,如果在setState方法中修改了TextField的装饰属性,如边框颜色、背景色等,是不会生效的。

要改变TextField的装饰,可以通过在setState方法中修改TextField的外部状态,例如使用一个变量来控制装饰的样式,然后在build方法中根据这个变量的值来设置TextField的装饰属性。这样,在调用setState方法后,build方法会重新执行,根据新的状态重新构建UI,从而改变TextField的装饰。

以下是一个示例代码:

代码语言:txt
复制
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isFocused = false;

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(
          borderSide: BorderSide(
            color: isFocused ? Colors.blue : Colors.grey,
          ),
        ),
      ),
      onFocusChange: (hasFocus) {
        setState(() {
          isFocused = hasFocus;
        });
      },
    );
  }
}

在上述代码中,我们使用一个布尔变量isFocused来控制TextField的边框颜色。当TextField获取焦点时,isFocused为true,边框颜色为蓝色;失去焦点时,isFocused为false,边框颜色为灰色。通过调用setState方法来更新isFocused的值,从而改变TextField的装饰。

推荐的腾讯云相关产品:腾讯云移动直播(https://cloud.tencent.com/product/mlvb)可用于实时音视频直播场景,腾讯云云服务器(https://cloud.tencent.com/product/cvm)可用于搭建云计算环境。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Imputation会不会改变原来芯片结果

    最近测试illumina SNP芯片数据填充时候发现,原来数据是会被改变,觉得这是一个小坑,在这里分享一下。...当然,对于看整体的话,应该是影响不大,毕竟它基本上是按照基因型频率和单倍体型结果来给。不过,对于个别比较重要点,还是影响比较大,在这里提醒大家注意下。...先来看一下几个最主流流程中版本中参数情况。...impute流程 IMPUTE2 (ox.ac.uk) impute2是有这个参数选项,是把原来分型数据点完全取代还是只填充分型数据中缺失位点,这应该只是个额外选项,非默认。...Minimac 前面版本Minimac没有发现相关选项,只有在第3和4版是有的,默认关闭。从选项说明看应该是只涉及参考中没有,而原始数据中有的点,据此推断,原来点也应该是变

    54310

    《Flutter》-- 4.Flutter组件基础

    Flutter组件基础 4.1 Widget组件基础 Flutter开发中有一个非常重要理念,即一切皆为组件。Flutter中Widget不仅可以表示UI元素,也可以布局元素、动画、装饰效果。...4.1.1 StatelessWidget StatelessWidget表示没有状态组件,它不需要管理组件内部状态,也无法使用setState()来改变组件状态。...4.2.2 自身状态管理 改变Widget自身状态时使用setState(),调用setState()后视图会执行重绘操作。...; BoxFit.cover:默认填充规则,在保证长宽比不变情况下缩放以适应当前显示空间,图片不会变形; BoxFit.fitWidth:从宽度上充满空间,高度会按比例缩放,图片不会变形,超出显示空间部分会被剪裁...onChange:输入框内容改变回调函数。 onEditingComplete:输入框输入完成时触发,不会返回输入内容。 onSubmitted:输入框输入完成时触发,会返回输入内容。

    12.5K30

    【Flutter 专题】64 图解基本 TextField 文本输入框 (一)

    和尚最近在学习基础 Flutter Widget,原因在于很多基础组件有很多容易忽视注意事项,了解并熟悉后对整体开发认知会有所提升;今天和尚学习一下 TextField 文本输入框;...是有状态 StatefulWidget,有丰富属性,自定义化较高,实践中需要合理利用各种回调; 案例尝试 和尚尝试最基本 TextField,区分默认状态和获取焦点状态; return TextField...maxLines 为允许展现最大行数,在使用 maxLength 时内容超过一行不会自动换行,因为默认 maxLines=1,此时设置为 null 或固定展示行数即可自动换行;区别在于 null 会展示多行...decoration 为边框修饰,可以借此来调整 TextField 展示效果;可以设置前置图标,后置图片,边框属性,内容属性等,和尚会在后续集中尝试;若要完全删除装饰,将 decoration 设置为空即可...输入内容; Center(child: Text(_textStr)) return TextField(onChanged: (text) { setState(() { _textStr

    4.7K51

    flutter 输入框组件TextField实现代码

    文字 this.focusNode, this.decoration: const InputDecoration(), //输入器装饰 TextInputType keyboardType...true, this.maxLines: 1, this.maxLength, this.maxLengthEnforced: true, this.onChanged, //文字改变触发...onChanged是每次输入框内每次文字变更触发回调,onSubmitted是用户提交而触发回调。 每当用户改变输入框内文字,都会在控制台输出现在字符串.与onSubmitted用法相同....title: Text('登录成功'), )); phoneController.clear(); } } void onTextClear() { setState...当按下一个未完成操作(如“next”或“previous”)时,用户内容被提交给[controller],但不会放弃焦点,因为开发人员可能希望立即将焦点转移到[onsubmit]中另一个输入小部件。

    4.8K11

    我们应该如何优雅处理 React 中受控与非受控

    这也就意味着,如果组件外部状态并不改变(这里指组件 props 中 value)时,即使用户在页面上展示 input 如何输入 input 框中渲染值也是不会发生任何改变。...但是由于组件内部 useState 值已经进行过初始化了,并不会由于组件 props 改变而重新初始化组件内部 state 状态。 // ......但是由于 TextField input 表单控件 value 是永远不会改变,所以,页面不会发生任何变化。 那么,解决这个问题其实也非常简单。...当 TextField 组件为受控状态时,内部表单 value 值并不会跟随组件内部 onChange 而改变表单值。...不过是 setState 额外接收一个 ignoreDestroy 参数确保销毁后不会在被调用 setState 设置已销毁状态。

    6.5K10

    【Flutter 专题】65 图解基本 TextField 文本输入框 (二)

    和尚刚学习了 TextField 基本用法,今天特意学习一下 TextField InputDecoration 文本框装饰相关内容; InputDecoration 源码分析 const...this.fillColor, this.border = InputBorder.none, this.enabled = true, }) 分析源码可知,Flutter 不仅提供了全面的构建装饰方式...,还提供了简单便利构建方式 collapsed 默认是无边框,且无法设置标签等其他属性; 案例尝试 icon 为装饰器外小图标,可灵活设置图标或其他 Widget,默认距输入框 16dp,主题可通过...;与 hintText 类似; return TextField(onChanged: (text) { setState(() { _textLength = text.length; }); },...hasFloatingPlaceholder 设置 TextField 获取焦点时 labelText 是否向上浮动;设置为 false 时,获取焦点后 labelText 隐藏,不会向上浮动; return

    4.7K41

    【业界】当前深度学习框架不会改变机器学习能力增长

    框架只是在应用程序中广泛采用机器学习中间步骤。我们需要是更多视觉产品,而这些可能还需要几年时间。 当前机器学习(ML)框架是ML产品化过程中需要一个中间步骤,它包含在应用程序环境中。...开始一种方法是学习商业智能(BI)领域提供经验。 有人曾说过,历史是不会重演。深度学习(DL)框架,如TensorFlow和Caffe,得到了大量技术新闻报道,因为这正是它们技术。...IBM公司收购了Cognos, SAP收购了Business Objects和Tableau,开始大力改变他们软件,以便在交付分析和开发周期中变得更加直观。...由年轻BI公司接受UX和云驱动变化在过去十年中改变了BI面貌。可视化无处不在,管理层可以做更多事情来实时调查自己业务。...在ML中也需要同样改变,容器仅仅是一个开始,封装了ML代码和环境,你可以把它看作是“类固醇模块”,但仍然需要第三代知识来利用它们力量。

    68240

    Flutter 全栈式——基础控件

    输入框控制器,通常用于获取输入内容 focusNode FocusNode 用于输入框焦点管理和监听 decoration InputDecoration 输入框装饰器,用于修改外观 keyboardType...装饰器 InputDecoration 属性名 类型 简述 icon Widget 设置位于输入框前图标 labelText String 设置描述输入框标签 labelStyle TextStyle...设置labelText样式 helperText String 帮助文本,位于输入框下方,如果errorText为空则不会显示 helperStyle TextStyle 设置helperText样式...底边线,默认 TextField( decoration: InputDecoration( border: OutlineInputBorder(...这时候可以将装饰器设置为InputDecoration.collapsed(hintText: 'hint')表示禁用装饰线 输入校验 TextInputFormatter inputFormatters

    3.8K40

    setState

    通过一个TextField和RaisedButton进行拼合,样式什么自己看,就不废话了。...这里状态有点乱,我画了幅图说明一下: 状态量有三个:text 输入框文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text值 2.在添加按钮点击时,将加入到状态值...todo中 3.todo用来渲染Todo列表,根据key和value展现数据和复选框状态 4.复选框通过点击,改变todo状态,来显示对勾以及文字下划线 5.根据showType不同,选择过滤方式...6.在适宜状态值改变时,调用老夫setState来更新 2.2:输入框监听 onChanged: (str) { text = str; }, 2.3:点击按钮监听 注意收起键盘操作FocusScope.of...onChanged: (b) { todo[key] = b; setState(() {}); }, 2.5:过滤操作 想了好一会,才想到该如何过滤出想要元素 showList(ShowType

    1.4K10

    Flutter 中 TextField 组件必然会遇到问题

    TextField 组件几乎是开发中必然会用到一个组件,在使用过程中会遇到两个非常棘手问题: 字数统计异常。 设置高度,文字无法居中。...字数统计异常 一般情况下,实现字数统计方法如下: TextField( onChanged: (value){ setState(() { _textFieldValue = value...下面改变 TextField 高度: Container( height: 30, child: TextField( decoration: InputDecoration(...高度不是150,在 「maxLines = 1」 情况下,通过设置 「contentPadding」 改变其高度,为了方便验证是否居中,在中间绘制一条对齐线: Container( height...TextField高度 和 文字高度共同决定,公式是: ❝「( TextField高度 - 文字高度)/2」 ❞ 我们需要计算出文字高度: TextStyle _style = const

    2.8K30

    setState

    通过一个TextField和RaisedButton进行拼合,样式什么自己看,就不废话了。...状态量有三个:text 输入框文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text值 2.在添加按钮点击时,将加入到状态值todo中 3.todo用来渲染Todo列表...,根据key和value展现数据和复选框状态 4.复选框通过点击,改变todo状态,来显示对勾以及文字下划线 5.根据showType不同,选择过滤方式。...6.在适宜状态值改变时,调用老夫setState来更新 ---- 2.2:输入框监听 onChanged: (str) { text = str; }, ---- 2.3:点击按钮监听 注意收起键盘操作...:复选框点击 onChanged: (b) { todo[key] = b; setState(() {}); }, ---- 2.5:过滤操作 想了好一会,才想到该如何过滤出想要元素

    95720

    设计模式(6)-装饰器(认识程序中装饰器)

    之前已经看过装饰器模式,但是感觉不是很清晰,但是有一种情况下出代码,一定是装饰器。...Widget* aWidget = new BorderDecorator( new BorderDecorator( new ScrollDecorator( new TextField(...通过使用不同具体装饰类以及这些装饰排列组合,设计师可以创造出很多不同行为组合。 缺点: 1. 这种比继承更加灵活机动特性,也同时意味着更加多复杂性。 2....装饰模式会导致设计中出现许多小类,如果过度使用,会使程序变得很复杂。 3. 装饰模式是针对抽象组件(Component)类型编程。...但是,如果你要针对具体组件编程时,就应该重新思考你应用架构,以及装饰者是否合适。当然也可以改变Component接口,增加新公开行为,实现“半透明”装饰者模式。在实际项目中要做出最佳选择。

    80070

    setState

    通过一个TextField和RaisedButton进行拼合,样式什么自己看,就不废话了。...:鸟瞰全局 这里状态有点乱,我画了幅图说明一下: 状态量有三个:text 输入框文字,todo列表数据,showType展现类型 1.输入框通过监听,改变text值 2.在添加按钮点击时,将加入到状态值...todo中 3.todo用来渲染Todo列表,根据key和value展现数据和复选框状态 4.复选框通过点击,改变todo状态,来显示对勾以及文字下划线 5.根据showType不同,选择过滤方式...6.在适宜状态值改变时,调用老夫setState来更新 ---- 2.2:输入框监听 onChanged: (str) { text = str; }, ---- 2.3:点击按钮监听 注意收起键盘操作...:复选框点击 onChanged: (b) { todo[key] = b; setState(() {}); }, ---- 2.5:过滤操作 想了好一会,才想到该如何过滤出想要元素

    94830
    领券