如何在 flutter 中放置浮动小部件？

Question

我想要做的是通过向下滚动屏幕使 TextField 保持在同一位置。我想知道是否有办法做到这一点？

这是我想要浮动的文本字段：

这是代码，它们CardWidget只是卡片，searchInput 是文本字段：

class RouteListPage extends StatefulWidget {

  @override
  _RouteListPageState createState() => _RouteListPageState();
}

class _RouteListPageState extends State<RouteListPage> {

  TextEditingController searchController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            searchInput(),
            CardWidget(),
            CardWidget(),
            CardWidget(),
            CardWidget(),
            SizedBox(height: 25.0)
          ],
        ),
      ),
    );
  }

  Widget searchInput(){
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 24, vertical: 25.0),
      padding: EdgeInsets.symmetric(horizontal: 24),
      decoration: BoxDecoration(
        color: Color(0xfff6f6f6),
        borderRadius: BorderRadius.circular(30),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.black45,
            offset: Offset(0.0, 2.0),
            blurRadius: 10.0,
          ),
        ],
      ),
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: searchController,
              decoration: InputDecoration(
                hintText: "Buscar rutas",
                hintStyle: TextStyle(fontFamily: "WorkSansSemiBold", fontSize: 16.0),
                border: InputBorder.none
              ),
            )
          ),
          InkWell(
            onTap: () {},
            child: Container(
              child: Icon(Icons.search, color: Tema.Colors.loginGradientEnd, size: 28.0)
            )
          )
        ],
      ),
    );
  }

}

Answer 1

您可以使用Stack小部件并在小部件下方放置滚动小部件TextField。使用Positioned小部件来控制位置searchInput()

您的build方法将更改为：

@override
Widget build(BuildContext context) {
    final _screenSize = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
        children: <Widget>[
          SingleChildScrollView(
            child: Column(
              children: <Widget>[
                CardWidget(),
                CardWidget(),
                CardWidget(),
                CardWidget(),
                SizedBox(height: 25.0)
              ],
            ),
          ),
          Positioned(
            top: 24.0,
            left: 0.0,
            right: 0.0,
            child: searchInput(),
          )
        ],
      ),
    );
  }