时间戳

首页 > 解决方案 > 如何设置这种文本字段的样式

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

问题描述

我想设计这种 TextField 的样式。

TextField_Picture

我面临的主要问题是设计美元部分来引导文本字段。到目前为止，这是我的代码。

/// 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

我知道这个问题并不复杂，但我还是比较陌生，所以你的帮助将不胜感激。

标签： flutterdartflutter-layout

解决方案

根据您的解决方案。
注意“IntrinsicHeight”小部件。它使孩子内部的所有孩子都具有相同的大小（取决于最大的孩子）。前缀内的“中心”小部件使容器达到最大高度 + 将其中的文本居中。只要确保不要过多地使用 IntrinsicHeight，因为文档声明它有点资源重。

例子

Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(10.0),
                  border: Border.all(color: Colors.grey[200]),
                ),
                child: IntrinsicHeight(
                  child: Row(
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 10.0),
                        decoration: BoxDecoration(
                          color: Colors.grey[100],
                          border: Border(
                            right: BorderSide(color: Colors.grey[200]),
                          ),
                        ),
                        child: Center(
                          child: Text(
                            'RS \u20B9',
                            style: TextStyle(fontSize: 24),
                          ),
                        ),
                      ),
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                            border: InputBorder.none,
                            labelText: "Place Bid",
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),

第二个代码几乎相同，只是在 TextField 中键入文本后没有标签。

Container(
                margin: EdgeInsets.symmetric(horizontal: 20.0),
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(10.0),
                  border: Border.all(color: Colors.grey[200]),
                ),
                child: IntrinsicHeight(
                  child: Row(
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 10.0),
                        decoration: BoxDecoration(
                          color: Colors.grey[100],
                          border: Border(
                            right: BorderSide(color: Colors.grey[200]),
                          ),
                        ),
                        child: Center(
                          child: Text(
                            'RS \u20B9',
                            style: TextStyle(fontSize: 24),
                          ),
                        ),
                      ),
                      Expanded(
                        child: TextField(
                          decoration: InputDecoration(
                            contentPadding: EdgeInsets.symmetric(
                              horizontal: 20.0,
                              vertical: 20.0,
                            ),
                            border: InputBorder.none,
                            hintText: "Place Bid",
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),

推荐阅读