如何在Flutter中添加一个悬浮小部件？

Question

我想做的是使一个文本框在滚动屏幕时保持在同一位置。请问是否有方法可以实现这一点？

下面是需要浮动的文本框：

此处是代码，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)
            )
          )
        ],
      ),
    );
  }

}

- user11008150

---

你应该使用一个 Stack: https://api.flutter.dev/flutter/widgets/Stack-class.html - Sami Haddad

使用堆栈时，当我在屏幕上滚动时，文本字段会被隐藏，我希望它像浮动操作按钮一样浮动。 - user11008150

你能提供一份代码示例吗？ - Sami Haddad

我已经放置了代码示例，非常感谢！ - user11008150

为什么不将您的输入框放在SingleChildScrollView之外，这样只有Column会滚动呢？ - Leo Letto

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(),
          )
        ],
      ),
    );
  }

- Victor Eronmosele

Answer 2

尝试使用这个，而不是 SingleChildScrollView

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

- SriDatta Yalla

Answer 3

使用一个Stack，将你的滚动视图和输入框作为子元素添加：

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

- Sami Haddad