Flutter：使用 ThemeData 的边框内的 TextField 或 TextFormField 标签

Question

当我的小部件处于活动状态时，如何使TextField标签浮动到顶部但保持在TextField边框内（而不是边缘） ？TextField

我想要的例子：

成为

这

inputDecorationTheme使用on可以吗ThemeData？或者我必须制作一个包装器小部件才能完成此任务？

非常愿意从应用程序范围内控制它ThemeData

Answer 1

不幸的是，我不知道如何使用默认工具来做到这一点，但我用另一种方式做到这一点，可能会对你有所帮助。

\n

\n
1. FocusNode为小部件内部创建变量和边框颜色：
\n

\n

// Use it to change color for border when textFiled in focus\nFocusNode _focusNode = FocusNode();\n\n// Color for border\nColor _borderColor = Colors.grey;\n

\n

\n
2. initState在create 监听器内部textField，如果textField将成为焦点，则将边框颜色更改为橙​​色，否则更改为灰色：
\n

\n

@override\nvoid initState() {\n  super.initState();\n  // Change color for border if focus was changed\n  _focusNode.addListener(() {\n    setState(() {\n      _borderColor = _focusNode.hasFocus ? Colors.orange : Colors.grey;\n    });\n  });\n}\n

\n

\n
3. 创建Container带有边框的textField，添加focusNode并设置装饰为textField：
\n

\n

Container(\n  decoration: BoxDecoration(\n    border: Border.all(color: _borderColor),\n    borderRadius: BorderRadius.circular(4),\n  ),\n  child: TextField(\n    focusNode: _focusNode,\n    style: TextStyle(color: Colors.grey),\n    keyboardType: TextInputType.number,\n    decoration: InputDecoration(\n      contentPadding: EdgeInsets.zero,\n      border: InputBorder.none,\n      labelText: "Amount",\n      prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),\n      prefixIcon: Padding(\n        padding: EdgeInsets.symmetric(vertical: 18, horizontal: 8),\n        child: Text("\xe2\x82\xa6", style: TextStyle(fontSize: 16, color: Colors.grey)),\n      ),\n    ),\n  ),\n),\n

\n

\n
4. 不要忘记dispose致电focusNode：
\n

\n

@override\nvoid dispose() {\n  _focusNode.dispose();\n  super.dispose();\n}\n

\n

完整代码：

\n

class TextFieldDesignPage extends StatefulWidget {\n  TextFieldDesignPage({Key? key}) : super(key: key);\n\n  @override\n  _TextFieldDesignPageState createState() => _TextFieldDesignPageState();\n}\n\nclass _TextFieldDesignPageState extends State<TextFieldDesignPage> {\n  // Use it to change color for border when textFiled in focus\n  FocusNode _focusNode = FocusNode();\n\n  // Color for border\n  Color _borderColor = Colors.grey;\n\n  @override\n  void initState() {\n    super.initState();\n    // Change color for border if focus was changed\n    _focusNode.addListener(() {\n      setState(() {\n        _borderColor = _focusNode.hasFocus ? Colors.orange : Colors.grey;\n      });\n    });\n  }\n\n  @override\n  void dispose() {\n    _focusNode.dispose();\n    super.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Center(\n        child: Container(\n          margin: EdgeInsets.all(8),\n          decoration: BoxDecoration(\n            border: Border.all(color: _borderColor),\n            borderRadius: BorderRadius.circular(4),\n          ),\n          child: TextField(\n            focusNode: _focusNode,\n            style: TextStyle(color: Colors.grey),\n            keyboardType: TextInputType.number,\n            decoration: InputDecoration(\n              contentPadding: EdgeInsets.zero,\n              border: InputBorder.none,\n              labelText: "Amount",\n              prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),\n              prefixIcon: Padding(\n                padding: EdgeInsets.symmetric(vertical: 18, horizontal: 8),\n                child: Text("\xe2\x82\xa6", style: TextStyle(fontSize: 16, color: Colors.grey)),\n              ),\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n

\n

结果：

\n

\n