Flutter 工具选项卡

Question

我正在尝试制作这样的页面设计：

但是我在实现标签栏时遇到了困难。当用户单击 'Detail' 时，详细信息视图将显示在选项卡栏下方，依此类推。有什么小部件可以使用吗？

Answer 1

child: CupertinoSlidingSegmentedControl(
                    children: {
                      0: Text("FLIGHTS"),
                      1: Text("TRAINS"),
                      2: Text("HOTELS")
                    },
                  onValueChanged: (value)
                  {
                    selectedValue = value;
                    setState(() {

                    });
                  },
                  groupValue: selectedValue,
                ),

Answer 2

import 'package:flutter/material.dart';


class TabBarDemo extends StatelessWidget {
  const TabBarDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Tabs Demo'),
          ),
          body: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  height: 400,
                  child: const TabBarView(
                  children: [
                    Icon(Icons.directions_car),// create image widget here using listview builder
                    Icon(Icons.directions_transit),
                    Icon(Icons.directions_bike),
                  ],
              ),
                ),

                Container(
                  height: 80,
                  color: Colors.blue,
                  child: const TabBar(
                    tabs: [
                      Tab(icon: Icon(Icons.directions_car)),  
                      Tab(icon: Icon(Icons.directions_transit)),
                      Tab(icon: Icon(Icons.directions_bike)),
                    ],
                  ),
                ),

                Container(
                  height: 400,
                  child:  TabBarView(
                    children: [
                      Container(color: Colors.red,), // create data widgets here using listview builder
                      Container(color: Colors.green,),
                      Container(color: Colors.yellow,),
                    ],
                  ),
                ),

        ]
            ),
          ),
        ),
      ),
    );
  }
}

Flutter 工具选项卡

Flutter implement tab

flutter

flutter-layout