Question

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

这是我要浮动的TextField：

这是代码，CardWidget只是卡片，searchInput是textField：

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

尝试使用此功能代替 SingleChildScrollView

Stack(
    children: <Widget>[
      searchInput(),
      ListView(
        children: <Widget>[
          CardWidget(),
          CardWidget(),
          CardWidget()
        ],
      )
    ],
  ),

Answer 2

您可以使用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(),
          )
        ],
      ),
    );
  }

Answer 3

使用Stack并将您的滚动视图和输入作为子项添加：

Stack(
  children: [
    SingleChildScrollView(),
    searchInput(),
  ],
)

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

3 个答案: