Flutter：从选项卡将一些字符串传递到特定选项卡并在选项卡栏中显示该特定选项卡

Question

我正在做一个颤振项目，我在标签栏中有 3 个标签。 在选项卡 1 和选项卡 2 中，有使用 ListView 显示一些数据的列表。单击列表项时，我想将一些字符串传递给选项卡 3 并显示选项卡 3。

下面是我的主页代码：

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  TabController controller;
  @override
  void initState() {
    super.initState();
    controller = new TabController(vsync: this, length: 3);
  }
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {},
      child: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text("InstaPost"),
            backgroundColor: Colors.black45,
            bottom: TabBar(
              tabs: [
                Tab(
                  text: "Tab 1",
                ),
                Tab(text: "Tab 2"),
                Tab(text: "Tab 3"),
                // Tab(text: "My Posts")
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              Tab1(),
              Tab2(),
              Tab3(),
            ],
          ),
        ),
      ),
    );
  }
}

因此，当应用程序启动时，第一个屏幕将是选项卡 1，其中显示了名称列表。代码如下

class _HashtagPageState extends State<HashtagPage> {

  Future<dynamic> getLists() async {
     // get list
  }
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {},
      child: FutureBuilder(
        future: getLists(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Container(
              child: SpinKitDoubleBounce(color: Colors.green, size: 100),
            );
          } else {
            // log(snapshot.data.toString());
            var data = snapshot.data;
            return Container(
              child: Column(
                children: <Widget>[
                  Expanded(
                    child: ListView.separated(
                      itemCount: data.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(data[index]),
                          onTap: () {
                              
                              // code to pass a string value to tab 3 and navigate to tab 3
                             
                          },
                        );
                      },
                    ),
                  )
                ],
              ),
            );
          }
        },
      ),
    );
  }
}

当单击选项卡 1 中的列表项时，我应该如何将字符串传递给选项卡 3 并同时导航到选项卡 3？

Answer 1

您可以在下面复制粘贴运行完整代码
你可以使用https://pub.dev/packages/provider
第一步：您可以将参数保存在YourModel
第 2 步：在 Tab3 中，您可以使用 (context.watch<YourModel>().parameter) 访问
代码sn-p

class YourModel extends ChangeNotifier {
  String _parameter = "";
  String get parameter => _parameter;

  void passParameter(String parameter) {
    _parameter = parameter;
    print(_parameter);
    notifyListeners();
  }
}
...
ChangeNotifierProvider(
  create: (context) => YourModel(),
  child: MyApp(),
),  
...
class Tab3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("${(context.watch<YourModel>().parameter)}"));
  }
}
...
return ListTile(
              title: Text(data[index]),
              onTap: () {
                Provider.of<YourModel>(context, listen: false)
                    .passParameter(data[index]);
                widget.controller.animateTo(2);
              },
            );

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'dart:collection';
import 'package:provider/provider.dart';

class YourModel extends ChangeNotifier {
  String _parameter = "";
  String get parameter => _parameter;

  void passParameter(String parameter) {
    _parameter = parameter;
    print(_parameter);
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => YourModel(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  TabController controller;
  @override
  void initState() {
    super.initState();
    controller = TabController(vsync: this, length: 3);
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {},
      child: Scaffold(
        appBar: AppBar(
          title: Text("InstaPost"),
          backgroundColor: Colors.black45,
          bottom: TabBar(
            controller: controller,
            tabs: [
              Tab(
                text: "Tab 1",
              ),
              Tab(text: "Tab 2"),
              Tab(text: "Tab 3"),
              // Tab(text: "My Posts")
            ],
          ),
        ),
        body: TabBarView(
          controller: controller,
          children: <Widget>[
            HashtagPage(controller),
            Tab2(),
            Tab3(),
          ],
        ),
      ),
    );
  }
}

class Tab2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Tab2");
  }
}

class Tab3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("${(context.watch<YourModel>().parameter)}"));
  }
}

class HashtagPage extends StatefulWidget {
  TabController controller;

  HashtagPage(this.controller);
  @override
  _HashtagPageState createState() => _HashtagPageState();
}

class _HashtagPageState extends State<HashtagPage> {
  Future<List<String>> _future;

  Future<List<String>> getLists() async {
    await Future.delayed(Duration(seconds: 1), () {});

    return Future.value(["a", "b", "c", "d", "e", "f", "g"]);
  }

  @override
  void initState() {
    _future = getLists();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {},
      child: FutureBuilder(
        future: _future,
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Container(
              child: SpinKitDoubleBounce(color: Colors.green, size: 100),
            );
          } else {
            // log(snapshot.data.toString());
            var data = snapshot.data;
            return Container(
              child: Column(
                children: <Widget>[
                  Expanded(
                    child: ListView.separated(
                      separatorBuilder: (BuildContext context, int index) =>
                          Divider(),
                      itemCount: data.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(data[index]),
                          onTap: () {
                            Provider.of<YourModel>(context, listen: false)
                                .passParameter(data[index]);
                            widget.controller.animateTo(2);
                          },
                        );
                      },
                    ),
                  )
                ],
              ),
            );
          }
        },
      ),
    );
  }
}