如何设置这种文本字段的样式

戈亚尔

我想设置这种TextField的样式。

TextField_Picture

我面临的主要问题是设计领导TextField的美元部分。到目前为止,这是我的代码。

/// My Place Bid Text Field
      Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(4),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            SizedBox(
              child: Container(
              //width: mySize.width * 0.2,
              //height: 50,
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(4),
                      bottomLeft: Radius.circular(4),
                    ),
                    color: Colors.grey[200]),
                child: Text(
                  "RS \u20B9",
                  style: TextStyle(fontSize: 24),
                ),
              ),
            ),
            Expanded(
              child: TextField(
                decoration: InputDecoration(
                    border: InputBorder.none,
                    labelText: "Place Bid",
                    labelStyle: TextStyle(fontSize: 24)),
              ),
            ),
          ],
        ),
      ),

这给了我输出

required_output_image

我知道这个问题并不复杂,但是我还是比较陌生,因此非常感谢您的帮助。

约翰·乔
@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Sample"),
        ),
        body: Padding(
          padding: EdgeInsets.all(10),
          child: Container(
            decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.grey[500],
                ),
                borderRadius: BorderRadius.all(Radius.circular(8))),
            width: double.infinity,
            height: 50,
            child: Row(
              children: <Widget>[
                Container(
                    padding: EdgeInsets.all(10),
                    color: Colors.grey.shade300,
                    height: 50,
                    child: Align(
                      alignment: Alignment.center,
                      child: Text(
                        "RS \u20B9",
                        style: TextStyle(
                            fontSize: 24, fontWeight: FontWeight.bold),
                      ),
                    )),
                SizedBox(
                  width: 10,
                ),
                Expanded(
                    child: Container(
                        height: 50,
                        child: TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "Enter Bid",
                              labelStyle: TextStyle(fontSize: 24)),
                        )))
              ],
            ),
          ),
        ));
  }

输出量

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将UITextview设置为喜欢Rounded Rect文本字段的样式?

如何在Pass-Thru启用的情况下为计算文本字段设置样式

文本字段的“选定”样式

C#如何将GridView文本字段的样式设置为2个选项:带超链接和不带

如何从主页文本字段将值设置为第二页文本字段

设置片段的文本字段

Flutter –如何设置电话号码文本字段的格式

如何设置输入文本字段的默认光标属性?

如何使用c#设置文本字段

如何设置SwiftUI的文本字段字符限制?

如何快速设置文本字段的布局边距?

如何在文本字段..中设置字符数限制?

如何将验证文本字段设置为包?

如何设置文本字段大小修复 macos swift

SwiftUI:如何为文本字段设置背景颜色

如何在文本字段中设置特定值?

带线的样式文本字段

如何在单击按钮时获取文本字段的选定文本?pickerview设置为文本字段的输入视图。迅速

如何根据 Flutter 中另一个文本字段的值自动设置文本字段的值?

SwiftUI 文本字段 - 如何在编辑模式下将文本字段的背景颜色设置为清除

解析大文本到文本字段,如何设置文本开头的视图位置

使用 javascript 设置文本字段的值

将焦点设置为文本字段

设置文本字段的数值范围

将文本字段设置为必填

使用uidatepicker设置文本字段值

设置多个文本字段的最大长度

使用文本字段设置rxSwift?

从文本字段设置画布大小