工作生活Flutter学习

Flutter使用

2019-07-01  本文已影响0人  南风_001
  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(),
  ));
}
上一篇 下一篇

猜你喜欢

热点阅读