Flutter组件--分段控制器(DefaultTabController)

~废弃回忆 �༄

已于 2022-11-19 10:54:39 修改

阅读量1.8k

点赞数 1

分类专栏： Flutter 文章标签： flutter 分段选择器

于 2022-10-20 11:10:10 首次发布

本文链接：https://blog.csdn.net/eastWind1101/article/details/127423161

版权

Flutter 专栏收录该内容

67 篇文章 19 订阅

订阅专栏

1.代码示例

void main() {
  runApp(MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        //分栏颜色
        primarySwatch: Colors.yellow,
        //选中分栏时候的高亮状态颜色
        highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
        //选中分栏时候,底层的水波纹颜色
        splashColor: Colors.blue,
      ),
      home: SegmentedControl(),
    );
  }
}

class SegmentedControl extends StatefulWidget {
  const SegmentedControl({super.key});

  @override
  State<SegmentedControl> createState() => _SegmentedControlState();
}

class _SegmentedControlState extends State<SegmentedControl> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter App"),
          leading: Icon(Icons.menu),
          actions: [Icon(Icons.search)],
          //这里TabBar中的tabs数组个数需要跟TabBarView中的元素个数保持一致
          bottom: TabBar(
              unselectedLabelColor: Colors.black38, //未选中控件颜色
              indicatorColor: Colors.red, //指示器的颜色
              tabs: [
                Tab(icon: Icon(Icons.local_florist)),
                Tab(icon: Icon(Icons.change_history)),
                Tab(icon: Icon(Icons.directions_bike)),
              ]),
        ),
        body: TabBarView(children: [
          Tab(
            icon: Icon(
              Icons.local_florist,
              size: 128,
              color: Colors.black12,
            ),
          ),
          Tab(
              icon: Icon(
            Icons.change_history,
            size: 128,
            color: Colors.black12,
          )),
          Tab(
              icon: Icon(
            Icons.directions_bike,
            size: 128,
            color: Colors.black12,
          )),
        ]),
      ),
    );
  }
}