Flutter 基础控件三

1.引言

上一节学习了Image 和RaisedButton,下拉框等控件。链接：https://www.jianshu.com/p/130046706ea1。这节将学习Scaffold，AppBar.

2.正题

2.1 appBar

appBar 主要元素如下所示：

image.png

AppBar主要由leading,title,actions 组成：

const AppBar({
        leading： Widget//最左边的控件
        title：Widget //标题控件
        actions :List  //从右向左排列的Widget
        bottom ：PreferredSize  //PreferredSize中可以设置一个child 作为appBar底部控件
        centerTitle: true //标题是否居中
  }) ;

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,
            ),
          ),
        ),
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'leading',
          onPressed: _restitchDress,
        ),
        title: Text('appBar'),
        actions: [
          IconButton(
            icon: Icon(Icons.more_vert),
            tooltip: 'Restitch it',
            onPressed: _restitchDress,
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            tooltip: 'Restitch it',
            onPressed: _restitchDress,
          ),
        ],

      ),

2.2 Scaffold布局

Scaffold 是Material Design布局结构的基本实现。提供了用于显示drawer、snackbar和底部sheet的API。

下面是底部tab切换的demo效果：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Code Sample for material.Scaffold',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

class _MyStatefulWidgetState extends State {
  int _count = 0;
  int pageIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  String getImage(int t) {
    String url = "";
    if (t == 0 && pageIndex == 0) {
      url = "images/icon_home_check.png";
    } else if (t == 0 && pageIndex != 0) {
      url = "images/icon_home_uncheck.png";
    } else if (t == 1 && pageIndex == 1) {
      url = "images/icon_oa_check.png";
    } else if (t == 1 && pageIndex != 1) {
      url = "images/icon_oa_uncheck.png";
    } else if (t == 2 && pageIndex != 2) {
      url = "images/icon_txl_uncheck.png";
    } else if (t == 2 && pageIndex == 2) {
      url = "images/icon_txl_check.png";
    } else if (t == 3 && pageIndex != 3) {
      url = "images/icon_setting_uncheck.png";
    } else if (t == 3 && pageIndex == 3) {
      url = "images/icon_setting_check.png";
    }
    return url;
  }

  int getColor(int i) {
    if (pageIndex == i) {
      return 0xFF42A5F5;
    } else {
      return 0xFFBDBDBD;
    }
  }

  var _airDress = () {
    print("Air it");
  };

  var _restitchDress = () {
    print("Restitch it");
  };

  var _repairDress = () {
    print("Repair it");
  };

  Widget build(BuildContext context) {
    return 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,
            ),
          ),
        ),
        centerTitle: true,
        leading: IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'leading',
          onPressed: _restitchDress,
        ),
        title: Text('appBar'),
        actions: [
          IconButton(
            icon: Icon(Icons.more_vert),
            tooltip: 'Restitch it',
            onPressed: _restitchDress,
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            tooltip: 'Restitch it',
            onPressed: _restitchDress,
          ),
        ],
      ),
      body: Center(
        child: Text('You have pressed the button $_count times.'),
      ),
      bottomNavigationBar: new CupertinoTabBar(
        currentIndex: pageIndex,
        onTap: (index) {
          setState(() {
            pageIndex = index;
          });
        },
        items: [
          new BottomNavigationBarItem(
              icon: new Image.asset(
                getImage(0),
                width: 25,
                height: 25,
              ),
              title: Text(
                "首页",
                style: TextStyle(color: Color(getColor(0)), fontSize: 13),
              )),
          new BottomNavigationBarItem(
              icon: new Image.asset(
                getImage(1),
                width: 25,
                height: 25,
              ),
              title: Text(
                "广场",
                style: TextStyle(color: Color(getColor(1)), fontSize: 13),
              )),
          new BottomNavigationBarItem(
              icon: new Image.asset(
                getImage(2),
                width: 25,
                height: 25,
              ),
              title: Text(
                "消息",
                style: TextStyle(color: Color(getColor(2)), fontSize: 13),
              )),
          new BottomNavigationBarItem(
              icon: new Image.asset(
                getImage(3),
                width: 25,
                height: 25,
              ),
              title: Text(
                "我的",
                style: TextStyle(color: Color(getColor(3)), fontSize: 13),
              )),
        ],
      ),
    );
  }
}

侧滑，底部tab切换，顶部tab切换等架构的参考例子：https://flutterchina.club/widgets/material/