学习 Flutter 笔记

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/langzxz/article/details/81489483

1. 自己用 StatelessWidget 模仿 Scaffold

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "我的应用",
      home: new myScaffold(),
    );
  }
}

class myScaffold extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Material(
      child: Column(
        children: <Widget>[
          new myAppBar(title: new Text('实例标题', style: Theme.of(context).primaryTextTheme.title),),
          new Expanded(child: new Center(child: new Text("你好世界!"),))
        ],
      ),
    );
  }

}

class myAppBar extends StatelessWidget{
  myAppBar({this.title});
  final Widget title;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final MediaQueryData mediaQuery = MediaQuery.of(context);
    final double top =  mediaQuery.padding.top;
    print(mediaQuery.toString());
    return new Container(
      height: mediaQuery.padding.top+56.0,
        padding:  EdgeInsets.fromLTRB(0.0, top, 0.0, 0.0),
      decoration: new BoxDecoration(color: Colors.blue[500]),
      child: new Row(
        children: <Widget>[
          new IconButton(icon: new Icon(Icons.menu),tooltip: "导航菜单", onPressed: null),
          new Expanded(child: Center( child: this.title)),
          new IconButton(icon: new Icon(Icons.search),tooltip: "搜索", onPressed: null)
        ],

      ),

    );
  }

}

解释一下代码
MyAppBar控件创建了一个Container(容器)，高度为56设备无关像素(device-independent pixels)，内部左右填充8像素(pixels)。在容器内部，MyAppBar为子控件设置Row(水平)布局，中间的title控件被设置成Expanded，Expanded的作用是展开Row、Column和Flex的子控件，意味它可以使用剩余的所有空间。

MyScaffold控件为子控件设置垂直布局，在垂直顶部放置一个MyAppBar的实例，将MyAppBar的Text控件作为标题使用，将控件作为参数传递给其他控件非常方便实用的，你可以创建通用的控件，以各种方式重复的使用。最后，MyScaffold使用Expanded，用一个中心文本来填充剩余的空间.

重点是适配iPhone X 刘海,通过看源码 scaffold.dart 中的build函数,学到了获取系统状态栏高度. 主要是知道了MediaQueryData类

  /* 获取系统状态栏高度 */
  static double getSysStatsHeight(BuildContext context) {
    return MediaQuery.of(context).padding.top;
  }
  /* 获取屏幕宽度 */
 static double getScreenWidth(BuildContext context) {
    return MediaQuery.of(context).size.width;
  }
  /* 获取屏幕高度 */
  static double getScreenHeight(BuildContext context) {
    return MediaQuery.of(context).size.height;
  }
  /* 获取屏幕是横屏还是竖屏 */
  static Orientation getScreenHeight(BuildContext context) {
    return MediaQuery.of(context).orientation;
  }

2. 打印调用堆栈

print(StackTrace.current.toString());

3.代码片段

在 Android studio 上输入 soutm 等快捷提示可以少写代码.

soutm

print("类名.函数名")

stless

class $NAME$ extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container($END$);
  }
}

stful

class $NAME$ extends StatefulWidget {
  @override
  _$NAME$State createState() => _$NAME$State();
}

class _$NAME$State extends State<$NAME$> {
  @override
  Widget build(BuildContext context) {
    return Container($END$);
  }
}