颤振中的透明TextField
颤振中的透明TextField
提问于 2021-04-02 14:31:03
我正在尝试实现一个透明的TextField (我正在复制instagram故事编辑器UI)。然而，我得到了一个背景颜色为白色的TextField。如何删除白色背景并使TextField透明？
这是我的代码：
@override
Widget build(BuildContext context) {
return Stack(
children: [
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: widget.onTap,
child: Container(
color: Colors.black.withOpacity(0.5),
),
),
Center(
child: Material(
child: Container(
color: Colors.transparent,
child: TextField(
focusNode: myFocusNode,
cursorColor: Colors.blueAccent,
decoration: InputDecoration(
fillColor: Colors.transparent,
filled: true,
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 15,
bottom: 11,
top: 11,
right: 15,
),
),
),
),
),
)以下是上述代码的结果：
我想让它看起来像：
更新：删除Material小部件和Container小部件并在顶部添加Scaffold解决了问题❤️
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: Stack(
children: [
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: widget.onTap,
child: Container(
color: Colors.black.withOpacity(0.5),
),
),
Center(
child: TextField(
focusNode: myFocusNode,
cursorColor: Colors.blueAccent,
decoration: InputDecoration(
fillColor: Colors.transparent,
filled: true,
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 15,
bottom: 11,
top: 11,
right: 15,
),
),
),
)
],
),
);
}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-04-02 14:37:42
使Material透明(而且不需要Container)：
https://www.dartpad.dev/5c0168a92f89ab40b809d2e92c5d51c6?null_safety=true
Center(
child: Material(
color: Colors.transparent,
child: TextField(
cursorColor: Colors.blueAccent,
decoration: InputDecoration(
fillColor: Colors.transparent,
filled: true,
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 15,
bottom: 11,
top: 11,
right: 15,
),
),
),
),
);Stack Overflow用户
发布于 2021-04-02 14:37:03
您不需要将TextField与Container和Material包装起来。Container是将白色背景添加到TextField中的那个。您只需设置TextField的边框属性：
TextField(
decoration: InputDecoration(
border: InputBorder.none,
),
)下面是InputBorder对InputDecoration边框属性可用选项的引用(阅读文档中的所有属性是个好主意)：https://api.flutter.dev/flutter/material/InputDecoration/border.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66920852
复制相关文章
相似问题
腾讯云开发者
