Представление панели вкладок Flutter

Я относительно новичок во Flutter и застрял в проблеме с панелью вкладок.

Я создал эту панель вкладок во всплывающем контейнере. Я бы хотел, чтобы сама панель вкладок оставалась на месте, а содержимое прокручивалось под ней. Однако в моей текущей версии весь раздел (включая параметры панели вкладок) помещается под текстовый контейнер выше.

Как я могу исправить это? Я изучил SliverAppBars, но мне не нужна полная панель приложений, только панель вкладок.

Код ниже — с акцентом на раздел NestedScrollView. Любая помощь очень ценится!

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

  @override
  State<TokenTabs> createState() => _TokenTabsState();
}

class _TokenTabsState extends State<TokenTabs>
    with SingleTickerProviderStateMixin {
  late int currentTab;
  late TabController tabController;

  @override
  void initState() {
    currentTab = 1;
    tabController = TabController(length: 3, vsync: this, initialIndex: 1);
    tabController.animation!.addListener(() {
      final value = tabController.animation!.value.round();
      if (value != currentTab && mounted) {
        changePage(value);
      }
    });
    super.initState();
  }

  void changePage(int newTab) {
    setState(() {
      currentTab = newTab;
    });
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final Color unselectedColor = Colors.grey;

    return NestedScrollView(
      headerSliverBuilder: (context, value) {
        return [
          SliverToBoxAdapter(
            child: Container(
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                      width: 0.1, color: Colors.grey.withOpacity(0.5)),
                ),
              ),
              height: 45,
              child: TabBar(
                controller: tabController,
                indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(
                  color: Colors.orange,
                  width: 3,
                )),
                indicatorPadding: const EdgeInsets.fromLTRB(6.0, 0.0, 6.0, 0.0),
                tabs: [
                  Text(
                    'Posts',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight:
                          currentTab == 0 ? FontWeight.bold : FontWeight.normal,
                      fontSize: 16.0,
                      color: currentTab == 0 ? Colors.black : unselectedColor,
                    ),
                  ),
                  Text(
                    'Holders',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight:
                          currentTab == 1 ? FontWeight.bold : FontWeight.normal,
                      fontSize: 16.0,
                      color: currentTab == 1 ? Colors.black : unselectedColor,
                    ),
                  ),
                  Text(
                    'Rewards',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontWeight:
                          currentTab == 2 ? FontWeight.bold : FontWeight.normal,
                      fontSize: 16.0,
                      color: currentTab == 2 ? Colors.black : unselectedColor,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ];
      },
      body: Container(
        child: TabBarView(
          controller: tabController,
          children: const [
            Text('Posts of users'),
            Text('Other holders'),
            Text('Rewards unlocked'),
          ],
        ),
      ),
    );
  }
}


Представление панели вкладок Flutter

Представление панели вкладок Flutter

1
0
23
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

вы можете прочитать следующую статью о представлениях панели вкладок Flutter. Надеюсь, поможет https://daniasblog.com/flutter-tabbar-gradient-style/

Спасибо, что указали мне на ваш блог, но я до сих пор не могу понять, как зафиксировать TabBar, не используя его как часть панели приложения. Можете ли вы посоветовать, как лучше всего решить эту проблему в приведенном выше коде?

Liam Duggan 29.03.2022 16:24
Ответ принят как подходящий

Решил это - вместо этого просто использовал DefaultTabController:

 return DefaultTabController(
      length: 3,
      child: Column(
        children: [
          SizedBox(
            height: 40,
            child: TabBar(
              controller: tabController,
              indicator: UnderlineTabIndicator(
                  borderSide: BorderSide(
                color: Colors.orange,
                width: 3,
              )),
              indicatorPadding: const EdgeInsets.fromLTRB(6.0, 0.0, 6.0, 0.0),
              tabs: [
                Text(
                  'Posts',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight:
                        currentTab == 0 ? FontWeight.bold : FontWeight.normal,
                    fontSize: 16.0,
                    color: currentTab == 0 ? Colors.black : unselectedColor,
                  ),
                ),
                Text(
                  'Holders',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight:
                        currentTab == 1 ? FontWeight.bold : FontWeight.normal,
                    fontSize: 16.0,
                    color: currentTab == 1 ? Colors.black : unselectedColor,
                  ),
                ),
                Text(
                  'Rewards',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontWeight:
                        currentTab == 2 ? FontWeight.bold : FontWeight.normal,
                    fontSize: 16.0,
                    color: currentTab == 2 ? Colors.black : unselectedColor,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: tabController,
              children: [
                ListView.builder(
                    itemCount: 100,
                    itemBuilder: (_, int index) {
                      return Text('Index $index');
                    }),
                ListView.builder(
                    itemCount: 100,
                    itemBuilder: (_, int index) {
                      return Text('Index $index');
                    }),
                ListView.builder(
                    itemCount: 100,
                    itemBuilder: (_, int index) {
                      return Text('Index $index');
                    }),
              ],
            ),
          ),
        ],
      ),
    );


Вы должны отметить это как принятый ответ.

il_boga 31.03.2022 12:31

Другие вопросы по теме