flutter 从另一个页面导航到特定的tabview

4ioopgfo  于 2023-06-07  发布在  Flutter
关注(0)|答案(1)|浏览(207)

我正在使用GoHenry克隆,我想根据选定的儿童帐户磁贴从主页导航到位于另一个页面上的特定选项卡视图(儿童帐户)(参见屏幕截图以供参考)。现在,如果我点击“欧文”,它会转到“欧文的”标签,但如果点击“埃洛伊丝”,它会转到“欧文的”标签。我想把它转到相应的孩子的标签。怎么做呢?下面是代码:
主页片段--导航到“MoneyPage()”

Expanded(
                  child: ListView.builder(
                    scrollDirection: Axis.vertical,
                    itemCount: value.childTiles.length,
                    itemBuilder: (context, index) {
                      ChildTile individualChildTile = value.childTiles[index];
                      return Padding(
                        padding: const EdgeInsets.only(bottom: 10),
                        child: ChildTiles(
                          childTiles: individualChildTile,
                          onTap: () {
                            Navigator.of(context).push(
                              MaterialPageRoute(
                                builder: (context) => const MoneyPage(),
                              ),
                            );

MoneyPage --导入MoneyTabBar()

import 'package:flutter/material.dart';
    import '../components/widgets/money_tab_bar.dart';

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

      @override
      State<MoneyPage> createState() => _CardsPageState();
    }

    class _CardsPageState extends State<MoneyPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            iconTheme: const IconThemeData(color: Colors.black),
            actions: const [
              Padding(
                padding: EdgeInsets.only(right: 20.0),
                child: Icon(Icons.pie_chart_outline, color: Colors.black),
              ),
            ],
            backgroundColor: Colors.white,
            elevation: 0,
            title: const Text(
              'Money',
              style: TextStyle(color: Colors.black, fontSize: 16),
            ),
          ),
          body: MoneyTabBar(),
        );
      }
    }

MoneyTabBar --由3个选项卡组成。我想导航到相应的标签的基础上“儿童”是选定的

import 'package:flutter/material.dart';
    import '../../pages/eloise_tab.dart';
    import '../../pages/henry_tab.dart';
    import '../../pages/owen_tab.dart';

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

      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 3, // 3 tabs
          child: Scaffold(
            // TabBar Background Color
            backgroundColor: Colors.white,

            body: Column(
              children: const [
                TabBar(
                  padding: EdgeInsets.only(left: 80, right: 80),
                  indicatorColor: Colors.red,
                  indicatorSize: TabBarIndicatorSize.label,
                  labelColor: Colors.black,
                  unselectedLabelColor: Colors.grey,
                  labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
                  tabs: [
                    // "Owen" Tab
                    Tab(
                      text: 'Owen',
                    ),

                    // "Eloise" Tab
                    Tab(
                      text: 'Eloise',
                    ),

                    // "Henry" Tab
                    Tab(
                      text: 'Henry',
                    ),
                  ],
                ),
                SizedBox(height: 25),
                Expanded(
                  child: TabBarView(
                    children: [
                      // "Owen" Tab Content
                      OwenTab(),

                      // "Eloise" Tab Content
                      EloiseTab(),

                      // "Henry" Tab Content
                      HenryTab(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }

OwenTab代码(以防万一)

import 'package:flutter/material.dart';

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

      @override
      Widget build(BuildContext context) {
        return Column(
          children: [
            const Text(
              '\$20.00',
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Text(
                  'Available to spend',
                  style: TextStyle(fontSize: 15),
                ),
                Icon(Icons.keyboard_arrow_down_rounded, size: 30),
              ],
            ),
          ],
        );
      }
    }

截图:

hlswsv35

hlswsv351#

您可以使用索引从其中瓷砖您有点击它

import 'package:flutter/material.dart';
import '../../pages/eloise_tab.dart';
import '../../pages/henry_tab.dart';
import '../../pages/owen_tab.dart';

class MoneyTabBar extends StatelessWidget {
  const MoneyTabBar({
    super.key, required this.tabIndex, //add this code
  });

  final int tabIndex;  //add this code

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: tabIndex,  //add this code
      length: 3, // 3 tabs
      child: Scaffold(
        // TabBar Background Color
        backgroundColor: Colors.white,

        body: Column(
          children: const [
            TabBar(
              padding: EdgeInsets.only(left: 80, right: 80),
              indicatorColor: Colors.red,
              indicatorSize: TabBarIndicatorSize.label,
              labelColor: Colors.black,
              unselectedLabelColor: Colors.grey,
              labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
              tabs: [
                // "Owen" Tab
                Tab(
                  text: 'Owen',
                ),

                // "Eloise" Tab
                Tab(
                  text: 'Eloise',
                ),

                // "Henry" Tab
                Tab(
                  text: 'Henry',
                ),
              ],
            ),
            SizedBox(height: 25),
            Expanded(
              child: TabBarView(
                children: [
                  // "Owen" Tab Content
                  OwenTab(),

                  // "Eloise" Tab Content
                  EloiseTab(),

                  // "Henry" Tab Content
                  HenryTab(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Expanded(
          child: ListView.builder(
            scrollDirection: Axis.vertical,
            itemCount: value.childTiles.length,
            itemBuilder: (context, index) {
              ChildTile individualChildTile = value.childTiles[index];
              return Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: ChildTiles(
                  childTiles: individualChildTile,
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const MoneyPage(
                        tabIndex: index,), //Add this code
                      ),
                    );
import 'package:flutter/material.dart';
import '../components/widgets/money_tab_bar.dart';

class MoneyPage extends StatefulWidget {
  const MoneyPage({super.key, required this.tabIndex}); //add this
  
  final int tabIndex;
  @override
  State<MoneyPage> createState() => _CardsPageState();
}

class _CardsPageState extends State<MoneyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: const IconThemeData(color: Colors.black),
        actions: const [
          Padding(
            padding: EdgeInsets.only(right: 20.0),
            child: Icon(Icons.pie_chart_outline, color: Colors.black),
          ),
        ],
        backgroundColor: Colors.white,
        elevation: 0,
        title: const Text(
          'Money',
          style: TextStyle(color: Colors.black, fontSize: 16),
        ),
      ),
      body: MoneyTabBar(tabIndex: widget.tabIndex), //add this
    );
  }
}

相关问题