Question

我在一页纸上有一个按钮。我想导航到一个带有带有tabbarview支架的新页面。我只想导航到特定选项卡。我该怎么做？

Answer 1

当前默认为固定标签；独立于用户选择

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SOTab(),
    );
  }
}

class SOTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Center(
          child: RaisedButton(onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
              return SOSample(initialPage: 2,);
            }));
          },child: Text("Go to next page, tab index 2"),
          ),
        ),
      ),
    );
  }
}

class SOSample extends StatefulWidget {
  int initialPage;

  SOSample({@required this.initialPage});

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

class _SOSampleState extends State<SOSample> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: choices.length);
    _nextPage(widget.initialPage);
  }

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

  void _nextPage(int tab) {
    final int newTab = _tabController.index + tab;
    if (newTab < 0 || newTab >= _tabController.length) return;
    _tabController.animateTo(newTab);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(48.0),
            child: Theme(
              data: Theme.of(context).copyWith(accentColor: Colors.white),
              child: Container(
                height: 48.0,
                alignment: Alignment.center,
                child: TabPageSelector(controller: _tabController),
              ),
            ),
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: choices.map((Page choice) {
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: SamplePage(choice: choice),
            );
          }).toList(),
        ),
      ),
    );
  }
}

class Page {
  const Page({this.title, this.icon});

  final String title;
  final IconData icon;
}

const List<Page> choices = const <Page>[
  const Page(title: 'Page 1', icon: Icons.print),
  const Page(title: 'Page 2', icon: Icons.insert_emoticon),
  const Page(title: 'Page 3', icon: Icons.rotate_right),
  const Page(title: 'Page 4', icon: Icons.receipt),
];

class SamplePage extends StatelessWidget {
  const SamplePage({Key key, this.choice}) : super(key: key);

  final Page choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(choice.icon, size: 128.0, color: textStyle.color),
            Text(choice.title, style: textStyle),
          ],
        ),
      ),
    );
  }
}

按下Flutter中上一页中的按钮后，导航到新页面中的特定选项卡

1 个答案: