flutter输入框宽度跟随文本长度变化

最新推荐文章于 2025-04-12 19:49:26 发布

小蜜蜂嗡嗡

最新推荐文章于 2025-04-12 19:49:26 发布

阅读量645

点赞数 1

文章标签： flutter

本文链接：https://blog.csdn.net/androidhyf/article/details/131212628

版权

该文描述了一个Flutter应用中的界面组件设计，包含一个白色的Container，内部有文字、间距、边框和圆角。Row中有一个Column显示退款信息，一个扩展的Container，以及一个右对齐的货币符号。此外，还展示了一个受约束的TextField，用于输入退款金额，限制为最小8到最大屏幕宽度的38%，并配置了输入格式和风格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Container(
            padding: EdgeInsets.all(20.w),
            margin: EdgeInsets.only(top: 20.w),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10)
            ),
            child: Row(
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(S.current.refundAmount,style: TextStyle(fontSize: 28.sp,fontWeight: FontWeight.w600),),
                    SizedBox(height: 20.w,),
                    Text('${S.current.modifiable}，${S.current.most}¥99.00',
                      style: TextStyle(color: JadeColors.grey_7,fontSize: 20.sp),),
                  ],
                ),
                Expanded(child: Container()),
                Container(
                  padding: EdgeInsets.only(bottom: 10.w),
                  child: Text('￥',style: TextStyle(fontSize: 28.sp,color: JadeColors.claret,),),
                ),
                //ConstrainedBox中的就是收缩包裹的TextField
                ConstrainedBox(
                  constraints: BoxConstraints(minWidth: 8.w,maxWidth: Utils().screenWidth(context)*0.38),
                  child: IntrinsicWidth(
                    child: TextField(
                      textAlign: TextAlign.right,
                      // controller: _amountTextEditingController,
                      // focusNode: _amountFocusNode,
                      style: TextStyle(
                          fontSize: 30.sp,
                          color: JadeColors.claret,
                          fontWeight: FontWeight.w600),
                      keyboardType: TextInputType.number,
                      textInputAction: TextInputAction.next,
                      maxLines: 1,
                      decoration: InputDecoration(
                        filled: true,
                        fillColor: Colors.white,
                        contentPadding: EdgeInsets.only(
                            left: 4.w, right: 4.w, top: 10.w, bottom: 10.w),
                        alignLabelWithHint: false,
                        border: OutlineInputBorder(
                            borderSide: BorderSide.none,
                            borderRadius: BorderRadius.circular(8.w)),
                        focusedBorder: OutlineInputBorder(
                            borderSide: BorderSide.none,
                            borderRadius: BorderRadius.circular(8.w)),
                      ),
                      cursorColor: JadeColors.grey,
                      onEditingComplete: () {
                      //  FocusScope.of(context).requestFocus(_remarkFocusNode);
                      },
                    ),
                  ),
                )
              ],
            ),
          ),