在flutter的textField中,当我们使用prefixIcon和label时,在焦点模式下,label的动画会转移到文本的顶部(而不是图标的顶部)。我不想使用prefixIcon,因为当textField不在焦点模式下时,prefixIcon会隐藏。我需要我的前缀总是可见的。就像这些来自材料设计文本字段部分的图像:第一节第一节第一节第一节第一次
azpvetkf1#
虽然存在一些固定位置值,下面是我实现,
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { FocusNode _focusNode = FocusNode(); bool textEditHasFocus = false; @override void initState() { super.initState(); _focusNode.addListener(() { setState(() { textEditHasFocus = _focusNode.hasFocus; }); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: _buildBody(), floatingActionButton: FloatingActionButton( onPressed: () {}, tooltip: 'Increment', child: Icon(Icons.add), ), ); } Widget _buildBody() { return Container( decoration: BoxDecoration(color: Colors.white), padding: new EdgeInsets.symmetric( vertical: 40.0, horizontal: 20, ), child: Stack( clipBehavior: Clip.none, children: <Widget>[ Container( child: TextField( focusNode: _focusNode, decoration: InputDecoration( // hintText: textEditHasFocus ? '' : 'Label', // hintStyle: TextStyle( // color: Colors.grey, // ), border: OutlineInputBorder(), focusedBorder: OutlineInputBorder(), contentPadding: EdgeInsets.only(left: 40), ), ), ), AnimatedPositioned( duration: Duration(milliseconds: 200), left: textEditHasFocus ? 10 : 40, top: textEditHasFocus ? -10 : 13, child: InkWell( onTap: () { _focusNode.requestFocus(); }, child: Container( padding: EdgeInsets.only(left: 3), color: Colors.white, child: Text('Label'), ), ), ), Positioned.fill( child: Align( alignment: Alignment.centerLeft, child: Container( padding: EdgeInsets.only(left: 10), color: Colors.transparent, child: Icon(Icons.favorite), ), ), ), ], ), ); } }
ajsxfq5m2#
您提供的material designs text fields part链接我尝试了相同的设计和您的需求,当您关注TextField时,labelText显示在prefixIcon上,我发现他们的很多解决方案都不正确参考prefixIcon小部件文档here并查看给定示例参考prefix小部件文档here参考InputDecoration类here当图标显示在TextField外部时,尝试以下代码
TextField
labelText
prefixIcon
prefix
InputDecoration
TextFormField( decoration: InputDecoration( icon: Icon( Icons.favorite, ), border: OutlineInputBorder(), labelText: 'Brand Description', hintText: 'Brand Description Here', ), ),
您的结果屏幕无焦点-〉x1c 0d1x您的结果屏幕有焦点-〉
ipakzgxi3#
flutter 3+用户有一个简单的解决方案
InputDecorator( decoration: const InputDecoration( labelText: "Select Hospital", prefixIcon: Icon(Icons.ac_unit), contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 10), border: OutlineInputBorder()), child:TextFormField(), );
3条答案
按热度按时间azpvetkf1#
虽然存在一些固定位置值,
下面是我实现,
ajsxfq5m2#
您提供的material designs text fields part链接我尝试了相同的设计和您的需求,当您关注
TextField
时,labelText
显示在prefixIcon
上,我发现他们的很多解决方案都不正确参考
prefixIcon
小部件文档here并查看给定示例参考
prefix
小部件文档here参考
InputDecoration
类here当图标显示在TextField外部时,尝试以下代码
您的结果屏幕无焦点-〉x1c 0d1x
您的结果屏幕有焦点-〉
ipakzgxi3#
flutter 3+用户有一个简单的解决方案