Flutter的AppBar的按钮组件

Flutter的AppBar的按钮组件

1.AppBar和SliverAppbar

AppBar和SliverAppBar全部都是继承StatefulWidget类，代表都是ToolBar 工具条

AppBar 显示顶部为leading，title，action，底部为TabBar

flexbleSpace显示子AppBar的下方，高度和AppBar高度一样

2.源代码

import 'package:flutter/material.dart';

//void main() => runApp(MyApp());
void main() => runApp(
  MaterialApp(
    title: "AppBar例子 By 大成",
    home: LayoutDemo1(),
  )
);

class LayoutDemo1 extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.home),
        title:Text("AppBar  按钮"),
        actions: <Widget>[
           IconButton (icon:Icon(Icons.search), tooltip:'搜索',onPressed:(){},),
           IconButton(icon:Icon(Icons.add), tooltip: '增加', onPressed: (){},),
          IconButton(icon:Icon(Icons.save), tooltip: '保存', onPressed: (){},),


        ],
      ),
    );
  }
}

3.运行结果

4. BottomNaviggationBar 页面底部按钮

源代码为

import 'package:flutter/material.dart';

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

class LayoutDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
    appBar: AppBar(
      title: Text("Scaffold 脚手架 by 大成")
    ),
    body:Center(
       child: Text('Scaffold 脚手架',
       style: TextStyle(fontSize: 28.0),
       ),
    ),
    bottomNavigationBar: BottomAppBar(
      child: Container(height: 50.0, width: 30.0,),
    ),

    floatingActionButton:FloatingActionButton(
      onPressed: (){},
      tooltip: '增加Add',
      child:Icon(Icons.add),
    ),

    floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked,
    );
  }
}


class MyApp extends StatelessWidget {
  //进入整个主页
  @override
  Widget build(BuildContext context) {
    //设置为Meter风格应用
    return MaterialApp(
      title: '大成Flutter例子',
      theme: ThemeData(

        primarySwatch: Colors.orange,
      ),
      home: MyHomePage(title: '大成首页例子'),


    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 1;
  final _widgetOptions = [
    Text("Index 0: 电话"),
    Text("Index 1: 微信"),
    Text("Index 2: 查询"),


  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("BottomNaviggationBar by 大成")
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.call), title: Text("电话",style: TextStyle(fontSize: 24.0),)),
          BottomNavigationBarItem(icon: Icon(Icons.info), title: Text("微信",style: TextStyle(fontSize: 24.0),)),
          BottomNavigationBarItem(icon: Icon(Icons.search), title: Text("查询",style: TextStyle(fontSize: 24.0),)),
        ],
        currentIndex: _selectedIndex,
        fixedColor: Colors.deepOrange,
        onTap: _onItemTapped,
      ),

    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

5.效果为：