flutter 我能为《扑动》里的泰伯出个主意吗?

5cnsuln7  于 2023-01-21  发布在  Flutter
关注(0)|答案(1)|浏览(133)

我不知道如何使标签栏像这样在我的Flutter网
我能有一个主意或怎么叫这个模式。
示例视频:https://youtu.be/A3ttwYljg_8

s3fp2yjn

s3fp2yjn1#

你只需要给TabBarView实体,剩下的就由flutter自己来处理了。
样本代码:-

TabBarView(
  children: <Widget>[
  Tabbar 1 body ...., //1st index, 1st tab
  Tabbar 2 body ...., //2nd index, 2nd tab
  Tabbar 3 body ...., //...
  Tabbar 4 body ...., //...
  Tabbar 5 body ....  //...
  ]
)

选项卡栏视图
完整代码:-

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

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

  @override
  State<MyStatelessWidget> createState() => _MyStatelessWidgetState();
}

class _MyStatelessWidgetState extends State<MyStatelessWidget> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 0,
      length: 5,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: const Color.fromARGB(255, 107, 179, 234),
          title: const Text('TabBar Widget'),
          bottom: const TabBar(
            labelColor: Colors.black,
            indicator: BoxDecoration(color: Colors.yellow),
            labelPadding: EdgeInsets.only(bottom: 5),
            indicatorPadding:
                EdgeInsets.only(left: 30, right: 30, bottom: 10, top: 5),
            tabs: <Widget>[
              SizedBox(
                width: 70,
                height: 40,
                child: Center(
                  child: Tab(
                    text: "Tab 1",
                  ),
                ),
              ),
              SizedBox(
                width: 70,
                height: 40,
                child: Tab(
                  text: "Tab 2",
                ),
              ),
              SizedBox(
                width: 70,
                height: 40,
                child: Tab(
                  text: "Tab 3",
                ),
              ),
              SizedBox(
                width: 70,
                height: 40,
                child: Tab(
                  text: "Tab 4",
                ),
              ),
              SizedBox(
                width: 70,
                height: 40,
                child: Tab(
                  text: "Tab 5",
                ),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Column(
              children: [
                Expanded(
                    child: Container(
                  color: Colors.red,
                )),
                Expanded(
                    child: Container(
                  color: Colors.purple,
                ))
              ],
            ),
            Column(
              children: [
                Expanded(
                    child: Container(
                  color: const Color.fromARGB(255, 9, 79, 135),
                )),
                Expanded(
                    child: Container(
                  color: Colors.purple,
                ))
              ],
            ),
            Column(
              children: [
                Expanded(
                    child: Container(
                  color: const Color.fromARGB(255, 144, 255, 54),
                )),
                Expanded(
                    child: Container(
                  color: Colors.purple,
                ))
              ],
            ),
            Column(
              children: [
                Expanded(
                    child: Container(
                  color: const Color.fromARGB(255, 109, 40, 36),
                )),
                Expanded(
                    child: Container(
                  color: Colors.yellow,
                ))
              ],
            ),
            Column(
              children: [
                Expanded(
                    child: Container(
                  color: Colors.green,
                )),
                Expanded(
                    child: Container(
                  color: Colors.yellow,
                ))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

输出:-

相关问题