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

Question

作为 flutter 样式的新手，我正在尝试创建一个看起来像这样的行

我无法让左侧的 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: () {})
                                    )
                                ],

                              ),
                            ),
                          ]
                        ),
                      ]
                    ),

                  ),
                ),

Answer 1

您要重现的示例看起来很像 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),
      ),
    );

Answer 2

您需要使用 Row 并让您的 TextField 使用 Expanded 并且每个其他 Widget 都采用正确的宽度。这是您要查找的代码：

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 仅用于演示，您可以将其删除。