Flutter使用

作者: 南风_001 | 来源:发表于2019-07-01 16:02 被阅读0次
    1. 创建一个label 居中
    import 'package:flutter/material.dart';
    // runApp函数接受给定的widget并使其称为widget树的根。
    void main() {
      runApp(
    // 居中
        new Center (
    
          child: new Text(
            'hello world!',
            textDirection: TextDirection.ltr,
          ),
          ),
      );
    }
    
    

    2.创建一navigationbar

    import 'package:flutter/material.dart';
    class MyAppBar extends StatelessWidget {
      MyAppBar({this.title});
      // widget 子类中的字段往往都会被定义为final
    @override
    final Widget title;
    Widget build (BuildContext context) {
      return new Container(
        height: 88.0,// 单位是逻辑上的像素,类似于浏览器中的像素 就是开发中写的物理像素
        padding: const EdgeInsets.symmetric(vertical:20.0,horizontal:8.0),
        decoration: new BoxDecoration(color: Colors.blue[500]),
        // row是水平方向的线性布局(linear layout)
        child: new Row(
          //列表的类型是widget
          children: <Widget>[
            new IconButton(
              icon: new Icon(Icons.menu),
              tooltip: "navigation menu",
              onPressed: null,// null会禁用button
            ),
            new Expanded(
              child: title,
            ),
            new IconButton(
              icon: new Icon(Icons.search),
              tooltip: "search",
              onPressed: null,
            ),
          ],
        ),
    
      );
    }
    }
    class MyScaffold extends StatelessWidget {
      @override
      Widget build (BuildContext context) {
        // Material 是UI呈现的一张纸
        return new Material(
          child: new Column(
            children: <Widget>[
              new MyAppBar(
                title:new Text(
                  'Example title',
                  style:Theme.of(context).primaryTextTheme.title,
                ),
              ),
                new Expanded(
                  child: new Center(
                    child: new Text('hello, flutter'),
                  ),
                ),
            ],
          ),
    
        );
      }
    }
    // main函数 启动app
    void main(){
      runApp(new MaterialApp(
    // title
        title: 'flutter',
    //  根vc
        home: new MyScaffold(),
      ));
    }
    

    相关文章

      网友评论

        本文标题:Flutter使用

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