Flutter设计帮助自定义选项卡栏

50pmv0ei 于 2023-05-08 发布在 Flutter

关注(0)|答案(1)|浏览(168)

我很新的Flutter，需要一个自定义应用程序栏的设计建议。
我想实现这样的目标：

我需要这个TabBar是一个AppBar内，并试图将其插入到行动[]列表。
现在看起来是这样的：

代码：

actions: [
                Row(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                      ),
                      height: 45,
                      width: 500,
                      child: TabBar(
                        labelColor: blue500,
                        tabs: _tab.tabs,
                        controller: _tab.tabController,
                        indicator: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Theme.of(context).colorScheme.secondaryContainer
                        ),
                      )
                    ),
                  ],
                )
              ]

欢迎提出任何想法/建议;）
谢谢大家！

flutter

来源：https://stackoverflow.com/questions/76155109/flutter-design-help-custom-tab-bar

1条答案

按热度按时间

idfiyjo81#

这是我的想法

import 'package:flutter/material.dart';

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

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {

  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 7,
      child: Scaffold(
        appBar: AppBar(
          title: const Text("TabBar"),
          bottom: TabBar(
              isScrollable: true,
              indicatorWeight: 2,
              indicatorColor: Colors.blue,
              labelColor: Colors.black,
              onTap: (index){
                setState(() {
                  selectedIndex = index;
                });
              },
              indicatorSize: TabBarIndicatorSize.label,
              tabs: [
                Tab(
                    child: Container(
                        padding: const EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                          color: selectedIndex == 0 ? Colors.blue.shade100 : null,
                          borderRadius: BorderRadius.circular(10)
                        ),
                        child: const Text("Latest"),
                    ),
                ),
                Tab(
                  child: Container(
                    padding: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                        color: selectedIndex == 1 ? Colors.blue.shade100 : null,
                        borderRadius: BorderRadius.circular(10)
                    ),
                    child: const Text("Business"),
                  ),
                ),
                Tab(
                  child: Container(
                    padding: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                        color: selectedIndex == 2 ? Colors.blue.shade100 : null,
                        borderRadius: BorderRadius.circular(10)
                    ),
                    child: const Text("Sports"),
                  ),
                ),
                Tab(
                  child: Container(
                    padding: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                        color: selectedIndex == 3 ? Colors.blue.shade100 : null,
                        borderRadius: BorderRadius.circular(10)
                    ),
                    child: const Text("Entertainment"),
                  ),
                ),
                Tab(
                  child: Container(
                    padding: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                        color: selectedIndex == 4 ? Colors.blue.shade100 : null,
                        borderRadius: BorderRadius.circular(10)
                    ),
                    child: const Text("Science"),
                  ),
                ),
                Tab(
                  child: Container(
                    padding: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                        color: selectedIndex == 5 ? Colors.blue.shade100 : null,
                        borderRadius: BorderRadius.circular(10)
                    ),
                    child: const Text("Health"),
                  ),
                ),
                Tab(
                  child: Container(
                    padding: const EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                        color: selectedIndex == 6 ? Colors.blue.shade100 : null,
                        borderRadius: BorderRadius.circular(10)
                    ),
                    child: const Text("Technology"),
                  ),
                ),
              ]
          ),
        ),
        body: const TabBarView(
          children: [
            //add your pages here
            Text(""),
            Text(""),
            Text(""),
            Text(""),
            Text(""),
            Text(""),
            Text(""),
          ],
        ),
      ),
    );
  }
}

赞(0）回复(0）举报 2023-05-08

我来回答

Flutter设计帮助自定义选项卡栏

1条答案

相关问题

热门标签

最新问答