flutter tabbar 和 navigation连用

  • main.dart
import 'package:flutter/material.dart';
import 'package:flutter_widget_demo/app.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return App();
    }
}
  • app.dart
import 'package:flutter/material.dart';
import 'package:flutter_widget_demo/tabbar_widget.dart';

class App extends StatelessWidget {
    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        theme: ThemeData(
            primaryColor: Colors.red,
        ),
        home: TabBarWidget(),
    );
  }
}
  • tabbar.dart
import 'package:flutter/material.dart';
import 'package:flutter_widget_demo/home_page_widget.dart';
import 'package:flutter_widget_demo/profile_page_widget.dart';

class TabBarWidget extends StatefulWidget {
    @override
    State<StatefulWidget> createState() {
        return TabBarState();
    }
}

class TabBarState extends State<TabBarWidget> {
    int currentIndex = 0;
    List<Widget> childrens = [
        HomeScreen(title: "Home",),
        ProfileScreen(title: "Profile",)
    ];

    void selectedTabBarItem(int index) {
        setState(() {
            currentIndex = index;
        });
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: childrens[currentIndex],
            bottomNavigationBar: BottomNavigationBar(
                onTap: selectedTabBarItem,
                currentIndex: currentIndex,
                items: [
                    BottomNavigationBarItem(
                        icon: Icon(Icons.home),
                        title: Text("Home"),
                    ),
                    BottomNavigationBarItem(
                        icon: Icon(Icons.person),
                        title: Text("Profile"),
                    )
                ],
            ),
        );
    }
}
  • home
import 'package:flutter/material.dart';
import 'package:flutter_widget_demo/Article.dart';
import 'package:flutter_widget_demo/article_content_page.dart';

class HomeScreen extends StatelessWidget {
    String title;
    HomeScreen({this.title});

    List<Article> articles = List.generate(
      10,
              (index) => Article(
            title: "Article $index",
            content: "Article $index : 离离原上草,一生一世枯荣. 野火烧不尽,春风吹又生.",
        ),
    );

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("Home"),
            ),
            body: ListView.separated(
              itemCount: articles.length,
              separatorBuilder: (context,index) {
                return Divider(height: 0.5,color: Colors.grey,);
              },
              itemBuilder: (context,index) {
                return ListTile(
                  title: Text(articles[index].title),
                  onTap: () async {
                    String result = await Navigator.push(
                      context,
                      new MaterialPageRoute(
                        builder: (context) => new ArticleContentScreen(article: articles[index],),
                      ),
                    );

                    if (result != null) {
                      Scaffold.of(context).showSnackBar(
                        new SnackBar(
                          content: new Text("$result"),
                          duration: const Duration(seconds: 1),
                        ),
                      );
                    }
                  },
                );
              },
            ),
        );
    }
}
  • profile
import 'package:flutter/material.dart';

class ProfileScreen extends StatelessWidget {
    String title;
    ProfileScreen({this.title});

    @override
    Widget build(BuildContext context) {
        // TODO: implement build
        return Center(
            child: Text(this.title),
        );
    }
}
  • article
class Article {
    String title;
    String content;

    Article({this.title,this.content});
}
  • article content
import 'package:flutter/material.dart';
import 'package:flutter_widget_demo/Article.dart';

class ArticleContentScreen extends StatelessWidget {

    final Article article;
    ArticleContentScreen({this.article});

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("${article.title}"),
            ),
            body: Padding(
                padding: new EdgeInsets.all(15.0),
                child: new Column(
                    children: <Widget>[
                        new Text('${article.content}'),
                        new Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: <Widget>[
                                new RaisedButton(
                                    onPressed: () {
                                        Navigator.pop(context, 'Like');
                                    },
                                    child: new Text('Like'),
                                ),
                                new RaisedButton(
                                    onPressed: () {
                                        Navigator.pop(context, 'Unlike');
                                    },
                                    child: new Text('Unlike'),
                                ),
                            ],
                        )
                    ],
                ),
            ),
        );
    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容