美文网首页
flutter tabbar 和 navigation连用

flutter tabbar 和 navigation连用

作者: CaptainRoy | 来源:发表于2019-10-17 15:45 被阅读0次
    • 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'),
                                    ),
                                ],
                            )
                        ],
                    ),
                ),
            );
        }
    }
    

    相关文章

      网友评论

          本文标题:flutter tabbar 和 navigation连用

          本文链接:https://www.haomeiwen.com/subject/hifvmctx.html