flutter 输入框填充背景色

最新推荐文章于 2024-05-24 18:39:10 发布
最新推荐文章于 2024-05-24 18:39:10 发布
阅读量1.2w 收藏 1
点赞数 5
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012482065/article/details/89018157
版权 
 TextField(
          decoration: InputDecoration(
                 border: InputBorder.none,//去掉输入框的下滑线
                 fillColor: Colors.white,
                 filled: true,
                 hintText: "留下你的精彩评论吧",
                 hintStyle: TextStyle(color: Colors.grey, fontSize: 13.0),
                 contentPadding: EdgeInsets.all(5.0),
                 enabledBorder: null,
                 disabledBorder: null),
                 controller: _publicController,
   ),

如果filled=true，则背景为fillColor，无需包在Container控件中

梦想小衣
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter开发：TextField常用属性的使用
软贱开发攻城狮
06-02 1710
在flutter开发过程中，掌握常用组件的使用是必备技能，flutter常用的组件和App开发时候常用的控件基本一模一样，只是使用的方式不一样罢了。 本篇博文分享一下flutter的文本输入框TextField组件的使用，该组件类似于iOS的TextField控件和Android的EditText控件，但是感觉flutter的文本输入框组件比App的文本输入框控件使用共简单一点，flutter的textfield组件的常用属性以及使用方式如下所示。 首先再来看一下flutter关于textfield的源
Flutter自定义输入框背景颜色InputDecoration
sq66666666的博客
03-24 1711
自定义InputDecoration背景色时加入filled:true属性生效 Expanded( child: TextField( decoration: InputDecoration( filled:true, //一定加入个属性不然不生效 fil
flutter中【底部弹出输入框】实现
最新发布
season_26的博客
05-24 1104
图二，如果为return SizedBox给弹窗设置背景色为white，输入框看不清楚。子组件接收到这个函数，在对应位置调用这个函数，将内部值作为函数参数（父组件对该函数作具体规定，如对接收的参数作何处理等），父组件就拿到了弹窗内的值。图一，为return Container设置背景色为white，输入框的灰色十分明显。官网的两种示例，一种是直角弹窗，一种是圆角弹窗。，其背景色会覆盖弹窗的背景色设置，弹窗背景色就无法被看到。针对函数的封装，可以封装为一个类，也可以封装为单独的函数。
Flutter Row,Column和Expanded
qq_42572245的博客
06-07 2009
1.Row class HomeContext extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Container( width: 300, height: 400, color: Colors.cyan,//背景颜色 child: Row( mainAxis
【Flutter 问题系列第 26 篇】给 TextField 添加背景色，为什么没有效果 ？
“Allen Su”的博客
07-10 3316
给 TextField 添加背景色，为什么没有效果 ？ 如何给 TextField 添加背景色
Flutter TextField设置背景色和圆角
weixin_49427955的博客
02-14 3893
TextField设置背景色和圆角
Flutter - 基础Widget，android简单小项目实例
m0_64604311的博客
12-07 487
child: Row( mainAxisSize: MainAxisSize.min, // 默认是max，占满父Widget；min是包裹内容 children: [ Icon(Icons.favorite, color: Colors.red), // 图标 Text(“喜欢作者”), // 文字 ], ), onPressed: () => print(“自定义Button”), // onPressed必传，否则样式可能会出问题 ) ], ); } } 2、定制 Button 默认间隔 :
flutter 输入框组件TextField的实现代码
08-25
Flutter 输入框组件TextField 的实现代码详解 在 Flutter 中，TextField 是一个非常重要的组件，用于用户输入文本信息。这篇文章将详细介绍 Flutter 中 TextField 的实现代码，包括其构造方法、基本使用方式、属性...
Flutter 完美的验证码输入框实现
08-19
Flutter 完美的验证码输入框实现 在本文中，我们将介绍如何在 Flutter 中实现完美的验证码输入框。该实现涉及到多个阶段的尝试和探索，终于找到了一种完美的解决方案。 第一个阶段：修改TextField控件 在开始的...
flutter实现输入框撤销、重写功能
06-16
在Flutter开发中，创建具有撤销和重写功能的输入框是一项常见的需求，这通常涉及到文本编辑和用户交互的增强。本篇文章将详细讲解如何利用Flutter的Widget和数据结构来实现这个功能。 首先，我们需要理解撤销和重做...
Flutter 设置文本框背景
卜大爷的博客
12-30 2万+
Flutter 设置文本框背景 先来看最终效果： 普通文本框样式的设置 以下设置一个普通的文本框样式： new TextField( controller: _titleTxt, keyboardType: TextInputType.text,//键盘类型 decoration: InputDecoration(//文本框样式设置 contentPadding: EdgeInsets.all(10.0),//内容边距 labelText: '标题',//输入框的描述文本
Flutter Text 实现下划线、波浪线、删除线、背景色、渐变文字、阴影、描边、空心字
xhuww的博客
09-22 1万+
Flutter Text 实现下划线、波浪线、删除线，添加文字背景色，设置渐变文字、添加阴影、描边，实现空心文字。
Flutter 添加背景图片
u010758352的专栏
04-07 3853
请支持原文：http://tryenough.com/flutter-backImage Flutter 中添加背景图片可以使用给Container添加decoration的方式。如下代码： body: Container( decoration: BoxDecoration( image: DecorationImage( image:...
Flutter TextField InputDecoration OutlineInputBorder 黑边（ + 改边框颜色 + 设背景色等）
u014799995的博客
09-09 5357
整一个 TextField 的边框效果，拿 border: 尝试了半天，普通状态下总有个黑边，自定义的颜色也没看到，再看了眼 TextField 的一堆属性，突然发现 TextField 不仅有 border ，还有 errorBorder、focusedBorderfocusedBorder、focusedErrorBorder、disabledBorder、enabledBorder 这几个 border …… 好了，问题解开 ???? 示例： TextField(
Flutter-设置Container背景色
热门推荐
IT技术专栏
08-02 2万+
child: Container( decoration: new BoxDecoration( color: Colors.grey, ),
Flutter color颜色的用法
yechaoa
05-05 2万+
系统自带color的使用和自定义color 系统的color 查看Color的源码： static const Color black = Color(0xFF000000); 可以看到，这里的black也是赋值封装好的，我们可以直接调用（Colors.black 即可）。 当然系统也封装了很多的color使用（查看源码轻松找到）， 上面我们可以看到有很多不同程度的红色，默认就是原始的...
【 开源计划 - Flutter组件 】 星星也可以如此闪耀 flutter_star
张风捷特烈的博客
02-23 679
【pub地址 】 【github地址】 dependencies: flutter_star: $lastVersion 复制代码 一、描述 目标: 使用canvas手工打造，一个完美的星星评分组件。 ---->[StarScore 星星显示组件]---- [1] 比如显示4.2: 会有5颗星, 前四颗填满，后一刻填充20% StarScore 为 Stateless组件，仅负责显示...
Flutter中的MaterialButton不能使用全局主题颜色的真正原因
勤劳是一种习惯
07-25 3162
Flutter中的MaterialButton不能使用全局主题颜色的真正原因 最近在使用flutter开发项目时遇到的问题， 在页面中想设置下按钮的宽度，首先想到的是RaisedButton，主要是有阴影，并且官方推荐的，但是不能设置宽度和高度，然后选用其父类MaterialButton，可以使用minWidth这个属性，也有阴影等效果，但是新的问题，我设置的全局主题中的button颜色，不能应用...
Flutter跨平台移动端开发丨TextField 添加背景色
全栈工程师
11-16 2026
TextField - decoration 打开 TextField 部件源码可见支持修改属性 decoration ，说明其支持样式会很丰富。本例演示怎样添加背景色 const TextField({ // ··· 省略 // 此对象可实现修改样式 this.decoration = const InputDecoration(), /...
flutter 输入框清空
05-18
可以使用`TextEditingController`来清空Flutter的输入框。首先，创建一个`TextEditingController`对象，并将其传递给输入框的`controller`属性。然后，在需要清空输入框的地方，调用`clear()`方法即可。 以下是一个示例代码： ```dart class MyPage extends StatefulWidget { @override _MyPageState createState() => _MyPageState(); } class _MyPageState extends State<MyPage> { TextEditingController _controller = TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Clear Text Field'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Padding( padding: EdgeInsets.symmetric(horizontal: 20), child: TextField( controller: _controller, decoration: InputDecoration( hintText: 'Enter some text', ), ), ), SizedBox(height: 20), ElevatedButton( onPressed: () { _controller.clear(); // Clear the text field }, child: Text('Clear'), ), ], ), ), ); } } ``` 在这个示例中，我们创建了一个带有一个输入框和一个清空按钮的页面。当用户点击按钮时，我们调用`clear()`方法来清空输入框。注意，在调用`clear()`方法之前，我们需要先创建一个`TextEditingController`对象，并将其传递给输入框的`controller`属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值