浮动搜索栏隐藏列表图块

Question

我有一个搜索浮动条，现在应该位于我的 ListView 的顶部，这就是它的样子：在此处输入图像描述

我将这个 package 用于搜索栏：在此处输入链接描述

这是我的主页：

class MyQrqc extends StatefulWidget {
  @override
  _MyQrqcPageState createState() => _MyQrqcPageState();
}
class _MyQrqcPageState extends State<MyQrqc> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
      body:Stack(
        fit: StackFit.expand,

        children: [

       MyExpanableCardViewFlutter(),
          const SizedBox(height: 50,),
           searchBarUI(),
        ],

      ), //Wrapped into SingleChildScrollView because when click on TextField  keyboard will open and you may get error on screen "bottom overflowed by pixels flutter"
    );
  }
}

列表视图页面：

class _MyExpanableCardViewFlutterState
   extends State<MyExpanableCardViewFlutter> {

 @override
 Widget build(BuildContext context) {
   return ListView.builder(
       itemCount: 3,
     itemBuilder: (BuildContext context, int index){

       return Card(
         elevation: 2,
         color: kSecondaryColor,
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(20),
         ),
         child: Container(
           decoration: const BoxDecoration(
             borderRadius: BorderRadius.all(Radius.circular(20)),
           ),
           foregroundDecoration: const RotatedCornerDecoration(
             color: Colors.orange,
             geometry: BadgeGeometry(width: 32, height: 32, cornerRadius: 16),
             textSpan: TextSpan(
               text: 'Init',
               style: TextStyle(
                 fontSize: 10,
                 letterSpacing: 1,
                 fontWeight: FontWeight.bold,
                 color: Colors.white,

               ),
             ),
           ),
           child: ExpansionTile(
             leading: ClipRRect(
               borderRadius: BorderRadius.circular(20),
               child: Image.asset(
                 "assets/icons/security.png",
                 height :40,
                 width: 40,),
             ),
             title: const Text("984561225",
               style: TextStyle(
                   fontSize: 18,
                   fontWeight: FontWeight.bold,
                   color: Colors.black),
             ),
             subtitle: const Text("this should be a title"),
             trailing: Column(
               children: [
                 Expanded(

                     child: CircularPercentIndicator(
                       radius: 20.0,
                       lineWidth: 2.0,
                       percent: 0.8,
                       center:  const Text("80%",
                         style: TextStyle(fontSize: 10),
                       ),
                       progressColor: kPrimaryColor,
                     )
                 ),

               ],
             ),
           children: [
             Row(
               children:  [
                 Expanded(
                     child: Image.asset("assets/icons/user.png",
                       width: 20,
                       height: 20,
                     ),



                 ),
                 const Expanded(
                   child: Text(
                     "Pilot",
                     style: TextStyle(fontSize: 10),
                   )



                 ),
                 const SizedBox(width: 50),
                 Expanded(
                   child: Image.asset("assets/icons/product.png",
                     width: 20,
                     height: 20,
                   ),



                 ),
                 const Expanded(
                     child: Text(
                       "product 1",
                       style: TextStyle(fontSize: 10),
                     )



                 ),
               ],
             ),
             const SizedBox(height: 10),
             Row(
               children:  [
                 Expanded(
                   child: Image.asset("assets/icons/location.png",
                     width: 20,
                     height: 20,
                   ),



                 ),
                 const Expanded(
                     child: Text(
                       "Perimeter",
                       style: TextStyle(fontSize: 10),

                     )



                 ),
                 const SizedBox(width: 50),
                 Expanded(
                   child: Image.asset("assets/icons/calendar.png",
                     width: 20,
                     height: 20,
                   ),



                 ),
                 const Expanded(
                     child: Text(
                       "10/02/2022",
                       style: TextStyle(fontSize: 10),
                     )



                 ),
               ],
             )

           ],
           ),
         ),
       );
     }

   );
 }
}

和浮动搜索栏小部件：

Widget searchBarUI(){

  return FloatingSearchBar(
    hint: 'Search.....',
    openAxisAlignment: 0.0,
    openWidth: 600,
    axisAlignment:0.0,
    scrollPadding: EdgeInsets.only(top: 16,bottom: 20),
    elevation: 4.0,
    physics: BouncingScrollPhysics(),
    onQueryChanged: (query){
      //Your methods will be here
    },

    transitionCurve: Curves.easeInOut,
    transitionDuration: Duration(milliseconds: 500),
    transition: CircularFloatingSearchBarTransition(),
    debounceDelay: Duration(milliseconds: 500),
    actions: [
      FloatingSearchBarAction(
        showIfOpened: false,
        child: CircularButton(icon: Icon(Icons.search),
          onPressed: (){
            print('Places Pressed');
          },),
      ),
      FloatingSearchBarAction.searchToClear(
        showIfClosed: false,
      ),
    ],
    builder: (context, transition){
      return ClipRRect(
        borderRadius: BorderRadius.circular(8.0),
        child: Material(
          color: Colors.white,
          child: Container(
            height: 200.0,
            color: Colors.white,
            child: Column(
              children: const [
                ListTile(
                  title: Text('Home'),
                  subtitle: Text('more info here........'),
                ),
              ],
            ),
          ),
        ),
      );
    },

  );
}

如果有人知道如何解决这个问题，我将不胜感激你的帮助。

Answer 1

也许它正在发生，因为你放了fit: StackFit.expand,在你的stack属性上你可以改变尝试改变堆栈的属性它可能有助于你想要达到的结果

Answer 2

或者您也可以将FloatingSearchBar()放在Container()中并放置背景color: Colors.transparent可以帮助您将listTiles倒置显示到FloatingSearchBar() 。 如果你愿意，你可以试试这个过程。 快乐编码^_^

Answer 3

你可以这样使用：

@override
Widget build(BuildContext context) {

  final fsb = FloatingSearchBar.of(context);
  
  return ListView.builder(
      padding: EdgeInsets.only(top: fsb.height + fsb.margins.vertical),
      itemCount: 3,
      itemBuilder: (BuildContext context, int index) {
        return Card(...);
      }
  );
}

现在即使是第一个搜索结果也是可见的。