如何在颤动中将元素推到最右边答案

【问题标题】：How to push elements to the far right in flutter如何在颤动中将元素推到最右边
【发布时间】：2020-08-28 16:36:30
【问题描述】：

作为一个颤振造型的新手，我正在尝试创建一个看起来像这样的行

我无法将 textField 放在左侧，宽度不固定，汽车图标放在最右侧。我试图用Stack 破解它，但文本在到达图标时会覆盖它。有人可以提供一种更好的方法将这两个小部件并排放置。

我的尝试

Positioned(
                  top: 50.0,
                  right: 15.0,
                  left: 15.0,
                  child: Container(
                    height: 50.0,
                    width: double.infinity,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(3.0),
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                            color: Colors.grey,
                            offset: Offset(1.0, 5.0),
                            blurRadius: 10,
                            spreadRadius: 3)
                      ],
                    ),
                    child: Column(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Expanded(
                              child: Stack(
                                children: [
                                  TextField(
                                    cursorColor: Colors.black,
                                    // controller: appState.locationController,
                                    decoration: InputDecoration(

                                      hintText: "pick up",
                                      border: InputBorder.none,
                                      // mainAxisAlignment: MainAxisAlignment.center,
                                      // crossAxisAlignment: CrossAxisAlignment.center,
                                      // contentPadding: EdgeInsets.only(left: 15.0, top: 16.0),
                                      icon: Container(
                                        margin: EdgeInsets.only(left: 10),
                                        width: 10,
                                        height: 10,
                                        child: Icon(
                                          Icons.location_on,
                                          color: Colors.black,
                                        ),
                                      ),
                                    ),
                                  ),
                                  Positioned(
                                    right: 8,
                                    child: IconButton(icon: Icon(Icons.business), onPressed: () {})
                                    )
                                ],

                              ),
                            ),
                          ]
                        ),
                      ]
                    ),

                  ),
                ),

【问题讨论】：

标签： flutter flutter-layout flutter-animation

【解决方案1】：

您需要使用Row 并使您的TextField 使用Expanded 并且所有其他小部件都采用正确的宽度。这是您要查找的代码：

Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Card(
            child: Container(
              height: 55,
              color: Colors.white,
              child: Row(
                children: [
                  SizedBox(width: 15),
                  Text('\u25FE', style: TextStyle(fontSize: 12)),
                  SizedBox(width: 15),
                  Expanded(
                    child: TextField(
                      decoration: InputDecoration(
                          hintText: 'Where to?', hintStyle: TextStyle(fontSize: 18), border: InputBorder.none),
                    ),
                  ),
                  Container(
                    width: 1,
                    margin: const EdgeInsets.symmetric(vertical: 6),
                    color: Colors.grey[400],
                  ),
                  SizedBox(width: 15),
                  Icon(Icons.directions_car),
                  SizedBox(width: 15),
                ],
              ),
            ),
          ),
        ),
      )

结果如下：

PS：center as first child 仅用于演示，您可以将其移除。

【讨论】：

感谢fam，这确实是我需要的代码@Mariano Zorrilla

【解决方案2】：

您要重现的示例看起来很像 ListTile (doc here)。

我能够使用您的风格复制类似的东西，如下所示：

它的代码是：

Container(
      color: Colors.black,
      child: ListTile(
        leading: Icon(Icons.location_on),
        title: TextField(
          cursorColor: Colors.black,
          decoration: InputDecoration(
            hintText: "Pick up",
            border: InputBorder.none,
          ),
        ),
        trailing: Icon(Icons.business),
      ),
    );

【讨论】：