Question

只要用户向左或向右滑动，搜索栏就不会受到此操作的影响。

这就是我想要做的：[我想要的] [1] [1]：https：//i.stack.imgur.com/ag9wv.png

这是我的代码。功能正常：

import 'package:firebase_database/firebase_database.dart';
import 'package:flappy_search_bar/flappy_search_bar.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> with SingleTickerProviderStateMixin{
TabController tabController;

int selectedTab = 0;

@override
void initState() {
super.initState();

tabController = TabController(vsync: this, length: 3);

tabController.addListener(() {
  if(!tabController.indexIsChanging){
    setState(() {
      selectedTab = tabController.index;
    });
  }
});

}
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("App"),
  ),
  backgroundColor: Colors.white,
  body: DefaultTabController(
    length: 3,
    child: Column(
      children: <Widget>[
        Material(
          color: Colors.white,
          child: TabBar(
            unselectedLabelColor: Colors.grey.shade300,
            labelColor: Colors.black,
            indicatorColor: Colors.black,
            controller: tabController,
            labelPadding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
            tabs: <Widget>[
              Tab(text: "IN USE"),
              Tab(text: "SHUTDOWN"),
              Tab(text: "ON BOARDING"),
            ],
          ),
        ),

        Expanded(
          child: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            controller: tabController,
            children: <Widget>[
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ],
    ),
  ),
);
}

getTab(index, child){
  return Tab(
    child: SizedBox.expand(
      child: Container(
        child: child,
        decoration: BoxDecoration(
          color: (selectedTab == index ? Colors.white : 
   Colors.grey.shade300),
         borderRadius: generateBorderRadius(index)
      ),
    ),
  ),
);
}

generateBorderRadius(index){
if((index + 1) == selectedTab)
  return BorderRadius.only(bottomRight: Radius.circular(10.0));
else if((index - 1) == selectedTab)
  return BorderRadius.only(bottomLeft: Radius.circular(10.0));
else
  return BorderRadius.zero;
}
}

我已经在pubspec中实现了SearchBar依赖项：

flappy_search_bar：^ 1.7.2

如果有人可以给我一些代码示例，这些示例可能与我想要的图像布局/设计不完全相同，但至少类似，并且让我更好地了解如何操作所需的小部件被操纵以在图像中再现结果。

PS：很抱歉，如果我在帖子中犯了一些错误，很抱歉，如果我没有添加您可能需要的所有信息，...这是我在堆栈溢出时的第一个帖子。预先感谢。

在Flutter中的TabBar和TabBarView之间添加SearchBar小部件

0 个答案: