I'm looking for a tutorial on using a horizontal ListView that behaves like a Tabview, ie displaying the link on the same screen. Some links to propose? thanks

CodePudding user response：

Tab child can others widget too, use height on Tab and isScrollable:true on TabBar

class TabBarDemo extends StatelessWidget {
  const TabBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              isScrollable: true,
              tabs: [
                Tab(
                    height: 100, // height
                    icon: Card(
                      child: Container(
                        height: 100,
                        width: 100,
                        color: Colors.red,
                      ),
                    )),
                Tab(
                  icon: Icon(Icons.directions_transit),
                ),
                Tab(
                  icon: Icon(Icons.directions_bike),
                ),
              ],
            ),
            title: const Text('Tabs Demo'),
          ),
          body: const TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

more about tabs

And using PageView & ListView, it will be

class TabBarDemo extends StatelessWidget {
  const TabBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    final PageController controller = PageController();
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 100, //tab item height
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) => GestureDetector(
                onTap: () {
                  controller.animateToPage(index,
                      duration: Duration(milliseconds: 100),
                      curve: Curves.bounceIn);
                },
                child: Container(
                  height: 100,
                  width: 100,
                  color: Colors.red,
                  child: Card(
                    child: Text("tab $index"),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            child: PageView.builder(
              controller: controller,
              itemBuilder: (context, index) {
                return Center(
                  child: Text("$index"),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

Also you can check CustomScrollView.

CodePudding user response：

run this example and you will get the whole idea :

class ListTapPage extends StatefulWidget {
  const ListTapPage({Key? key}) : super(key: key);

  @override
  State<ListTapPage> createState() => _ListTapPageState();
}

class _ListTapPageState extends State<ListTapPage> {

  List<Widget> pages = [const Center(child: Text("one")),const Center(child: Text("two")),const Center(child: Text("three"),)];
  List<String> names = ["one","two","three"];
  List<Color> colors = [Colors.red,Colors.blue,Colors.yellow];
  int _index = 0 ;

  void changeIndex({required int num}){
    setState((){
      _index = num;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
            children: [
              Positioned(top: 0,right: 0,left: 0,bottom: MediaQuery.of(context).size.height * 0.75,
                  child: SizedBox(
                    height: 100,
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: 3,
                      itemBuilder: (context, index) {
                        return GestureDetector(
                          onTap:()=>changeIndex(num: index) ,
                          child: Container(alignment: Alignment.center,width: 200,height: 50,color: colors[index],child: Text(names[index])),
                        );
                        },
                    ),
                  )
              ),
              Positioned(
                  left: 0,
                  right: 0,
                  bottom: 0,
                  height: MediaQuery.of(context).size.height * 0.30,
                  child: pages[_index]
              ),
            ]
        ),
      ),
    );
  }
}

• just return this widget in the material app ,see the result and look at the code , you will understand , it's a simple demo.