Flutter 更改它在选项卡中显示的内容答案

【问题标题】：Flutter change what it is displayed in a tabFlutter 更改它在选项卡中显示的内容
【发布时间】：2020-09-28 08:47:59
【问题描述】：

我目前在为我选择的每个选项卡显示不同的小部件时遇到问题。

当我点击另一个标签栏时，有什么方法可以更改文本或其他内容吗？

我尝试在开关内使用 tabNames[index] 和 index，并为每个页面创建了不同的案例，但它不起作用。我想在每个选项卡中显示多个小部件，具体取决于我点击的选项卡。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Navigation Example',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

const List<String> tabNames = const<String>[
  'foo', 'bar', 'baz', 'quox', 'quuz', 'corge', 'grault', 'garply', 'waldo'
];

class _MyHomePageState extends State<MyHomePage> {

  int _screen = 0;

  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: tabNames.length,
      child: new Scaffold(
        appBar: new AppBar(
          title: new Text('Navigation example'),
        ),
        body: new TabBarView(
          children: new List<Widget>.generate(tabNames.length, (int index) {
            switch (_screen) {
              case 0: return new Center(
                child: new Text('First screen, ${tabNames[index]}'),
              );
              case 1: return new Center(
                child: new Text('Second screen'),
              );
            }
          }),
        ),
        bottomNavigationBar: new Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            new AnimatedCrossFade(
              firstChild: new Material(
                color: Theme
                  .of(context)
                  .primaryColor,
                child: new TabBar(
                  isScrollable: true,
                  tabs: new List.generate(tabNames.length, (index) {
                    return new Tab(text: tabNames[index].toUpperCase());
                  }),
                ),
              ),
              secondChild: new Container(),
              crossFadeState: _screen == 0
                              ? CrossFadeState.showFirst
                              : CrossFadeState.showSecond,
              duration: const Duration(milliseconds: 300),
            ),
            new BottomNavigationBar(
              currentIndex: _screen,
              onTap: (int index) {
                setState(() {
                  _screen = index;
                });
              },
              items: [
                new BottomNavigationBarItem(
                  icon: new Icon(Icons.airplanemode_active),
                  title: new Text('Airplane'),
                ),
                new BottomNavigationBarItem(
                  icon: new Icon(Icons.motorcycle),
                  title: new Text('Motorcycle'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart tabs widget

【解决方案1】：

我认为您将小部件列表传递给 TabBarView 的方式不合适。不要使用 List.generate: 而是尝试像这样包装你的小部件：

body: TabBarView(
         children: [
          Center(child: Text('First screen')),
          Center(child: Text('Second screen')),
         ]
),

标签控制器动态处理页面的变化，无需放置switch case来选择屏幕。

【讨论】：