美文网首页
Flutter 不规则底部导航栏,点击可以打开新的路由

Flutter 不规则底部导航栏,点击可以打开新的路由

作者: 叶秋_YQ | 来源:发表于2019-05-01 14:46 被阅读0次
最终效果

main

import 'package:flutter/material.dart';
import 'BottonWidget.dart';
main(){
  runApp(new MyApp());
}
class MyApp extends StatelessWidget {
 
 final _Color = Color.fromARGB(250, 200, 100, 125);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      // 自定义主题样本
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
      ),
      home: BottonWidget(),
    );
  }
}

BottonWidget

import 'package:flutter/material.dart';
import 'each_view.dart';
class BottonWidget extends StatefulWidget {
  BottonWidget({Key key}) : super(key: key);
  _BottonWidgetState createState() => _BottonWidgetState();
}

class _BottonWidgetState extends State<BottonWidget> {

  List<Widget> _each_view;
  int _index = 0;


  @override
  void initState() {

    _each_view = List();
    // 把 动态的EachView添加到list里面并设置title;
    _each_view..add(EachView('home'))..add(EachView('email'));
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 设置索引
      body: _each_view[_index],

      // 点击打开新的路由
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){
            return EachView('New Page');
          }));
        },
        // 长按提示字
        tooltip: '你还要我怎样',

        child: Icon(
          Icons.add,
          color:Colors.white,
        ),
      ),
      // 把要添加的按钮 融合到底部导航栏里面 (这个可以修改其他的值)
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue,
        // 融合效果的参数
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            // 设置图标和颜色
            IconButton(
              icon: Icon(Icons.home),
              color: Colors.white,
              // 点击的索引
              onPressed: (){
                setState(() {
                  _index = 0;
                });
              },
            ),
             IconButton(
              icon: Icon(Icons.airport_shuttle),
              color: Colors.white,
              onPressed: (){
                setState(() {
                  _index = 1;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

EachView

import 'package:flutter/material.dart';

class EachView extends StatefulWidget {
  
  String _title;
  EachView(this._title);

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

class _EachViewState extends State<EachView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      
      // 传匿名的参数
      appBar: AppBar(title: Text(widget._title),),
      body: Center(child: Text(widget._title),),
    );
  }
}

相关文章

网友评论

      本文标题:Flutter 不规则底部导航栏,点击可以打开新的路由

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