Flutter目录结构介绍、入口、自定义widget等

1、 Flutter 目录结构介绍

文件夹	作用
android	android 平台相关代码
ios	ios 平台相关代码
lib	flutter 相关代码，我们主要编写的代 码就在这个文件夹
test	用于存放测试代码
pubspec.yaml	配置文件，一般存放一些第三方库的依赖。

2、Flutter 入口文件、入口方法

void main(){ runApp(MyApp());
}

也可以简写
void main()=>runApp(MyApp());

3、Flutter 第一个 Demo Center组件的使用

void main() => runApp(new Center(
      child: new Text(
        "第一个futter项目",
        textDirection: TextDirection.ltr,
        style: new TextStyle(color: Colors.yellow, fontSize: 14.0),
      ),
    ));

4、Flutter 把内容单独抽离成一个组件

在 Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget/StatefulWidget 前期我们都继承 StatelessWidget。

class MyCenter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: new Text(
        "第一个futter项目",
        textDirection: TextDirection.ltr,
        style: new TextStyle(color: Colors.yellow, fontSize: 14.0),
      ),
    );
  }
}

5、给 Text 组件添加一些属性

class MyCenter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: new Text(
        "第一个futter项目",
        textDirection: TextDirection.ltr,
        style: new TextStyle(
//            color: Colors.yellow,
            color: Color.fromARGB(255, 0, 122, 0),
            fontSize: 14.0,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic),
      ),
    );
  }
}

6、用MaterialApp 和 Scaffold两个组件装饰 App

6.1、MaterialApp

MaterialApp 是一个方便的 Widget，它封装了应用程序实现 Material Design 所需要的 一些 Widget。一般作为顶层 widget 使用，常用的属性有：

• home(主页)
• title(标题)
• color(颜色)
• theme(主题)
• routes(路由)

6.2、Scaffold

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

• appBar - 显示在界面顶部的一个 AppBar。
• body - 当前界面所显示的主要内容 Widget。
• drawer - 抽屉菜单控件。

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

class MyApp extends StatelessWidget {
  static const String _title = '标题';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyWidget(),
      ),
    );
  }
}


class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      ///卡片包装
      child: new Card(

          ///增加点击效果
          child: new FlatButton(
              onPressed: () {
                print("点击了哦");
              },
              child: new Padding(
                padding: new EdgeInsets.only(
                    left: 0.0, top: 10.0, right: 10.0, bottom: 10.0),
                child: new Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ///文本描述
                    new Container(
                        child: new Text(
                          "首先我们创建一个私有方法_getBottomItem，返回一个 Expanded Widget，因为后面我们需要将这个方法返回的 Widget 在 Row 下平均充满",
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 14.0,
                          ),

                          ///最长三行，超过 ... 显示
                          maxLines: 3,
                          overflow: TextOverflow.ellipsis,
                        ),
                        margin: new EdgeInsets.only(top: 6.0, bottom: 2.0),
                        alignment: Alignment.topLeft),
                    new Padding(padding: EdgeInsets.all(10.0)),

                    ///三个平均分配的横向图标文字
                    new Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        _getBottomItem(Icons.star, "1000"),
                        _getBottomItem(Icons.link, "1000"),
                        _getBottomItem(Icons.subject, "1000"),
                      ],
                    ),
                  ],
                ),
              ))),
    );
  }
}

///返回一个居中带图标和文本的Item
_getBottomItem(IconData icon, String text) {
  ///充满 Row 横向的布局
  return new Expanded(
    flex: 1,

    ///居中显示
    child: new Center(
      ///横向布局
      child: new Row(
        ///主轴居中,即是横向居中
        mainAxisAlignment: MainAxisAlignment.center,

        ///大小按照最大充满
        mainAxisSize: MainAxisSize.max,

        ///竖向也居中
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          ///一个图标，大小16.0，灰色
          new Icon(
            icon,
            size: 16.0,
            color: Colors.grey,
          ),

          ///间隔
          new Padding(padding: new EdgeInsets.only(left: 5.0)),

          ///显示文本
          new Text(
            text,
            //设置字体样式：颜色灰色，字体大小14.0
            style: new TextStyle(color: Colors.grey, fontSize: 14.0),
            //超过的省略为...显示
            overflow: TextOverflow.ellipsis,
            //最长一行
            maxLines: 1,
          ),
        ],
      ),
    ),
  );
}