Flutter的基本应用

如果你还没有搭建Flutter开发环境，请点击它。

下面是效果图

gridview.jpg listview.jpg

新手上路

//运行你的程序
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(// 你的app
    title: 'Text Widget',//你的App标题
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),//主题
    home: new Scaffold(//这个widget包含了Appbar
      appBar: new AppBar(
        title: new Text("Text Widget"),
      ),
      body: new Center(
        child: new Text(
          "To make sections of the text interactive, use [RichText] and specify"
              " a[TapGestureRecognizer] as the [TextSpan.recognizer] "
              "of the relevant part of",
          textAlign: TextAlign.left,
          textDirection: TextDirection.rtl,
          maxLines: 3,
          overflow: TextOverflow.fade,
          style: TextStyle(
              fontSize: 26.0,
              color: Colors.black,
              fontWeight: FontWeight.bold,
              fontStyle: FontStyle.normal,
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.dotted),
        ),
      ),
    ));

}
}

上面就是演示了，如何开始你的程序，并介绍了Text组件，其实你只要记住Flutter中，所有的一切都是组件。

Container组件

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
    title: 'Hello Flutter',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: new Scaffold(
      appBar: new AppBar(
        title: new Text("Container Widget"),
      ),
      body: new Center(
        child: new Container(
          child: new Text(
            "of an app using the [bottomNavigationBar] property",
            style: new TextStyle(fontSize: 16.0),
          ),
          alignment: Alignment.center,
          width: 200,
          height: 200,
          padding: const EdgeInsets.fromLTRB(10, 20, 10, 20),
          margin: const EdgeInsets.fromLTRB(50, 10, 10, 10),
          //不能和color一起使用
          decoration: new BoxDecoration(
            borderRadius: new BorderRadius.circular(10.0),
            shape: BoxShape.rectangle,
            gradient: new LinearGradient(colors: [
              Colors.amberAccent,
              Colors.blueGrey,
              Colors.blueGrey,
              Colors.black45
            ])
          ),
        ),
      ),
    ));
  }
}

我的注释已经写得非常清楚，需要说的是Container即容器，就是可以包含其他组件的组件，当然它只能有一个组件，那如果想要包含多个组件呢？

ListView和GridView

class MyApp extends StatelessWidget {
  final itemData = <String>[];
@override
Widget build(BuildContext context) {
return new MaterialApp(
  title: "List Widget Demo",
  home: new Scaffold(
    appBar: new AppBar(title: new Text("ListView")),
    body: new Center(
      child: new Container(
        child: new MyListView(items: itemData),
      ),
    ),
  ),
);
}
 }

class MyListView extends StatelessWidget {
final List<String> items;
MyListView({Key key, @required this.items}) : super(key: key);
@override
Widget build(BuildContext context) {
return new ListView.builder(
    itemCount: items.length,
    itemBuilder: (context, index) {
      return new Container(
        decoration: new BoxDecoration(color: Colors.red),
        padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
        child: new Image.network(
          items[index],
          scale: 2,
          fit: BoxFit.fill,
        ),
      );
    });
  }
}

其实ListView的写法有几种，我这里是动态的写法，使用ListView.builder，其中需要 itemCount和itemBuilder，itemCount就是挑条目的数量，而itemBuilder是一个IndexedWidgetBuilder，它是什么呢？

typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

实际上它是以函数，通过索引去创建Widget，然后返回Widget给itemBuilder

GridView

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
  title: "App Title",
  home: new Scaffold(
    appBar: new AppBar(
      title: new Text("GridView"),
    ),
    body: new Center(
      child: new MyGridView(urls: itemData),
    ),
  ),
);
}
}

class MyGridView extends StatelessWidget {
final List<String> urls;
MyGridView({Key key, @required this.urls}) : super(key: key);
@override
Widget build(BuildContext context) {
return new GridView.builder(
    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3, //列数
        crossAxisSpacing: 5.0, //item 的间隙
        mainAxisSpacing: 5, //item垂直的间隙
        childAspectRatio: 0.7), //item的宽高比
    itemCount: urls.length, //item数量
    itemBuilder: (context, index) {
      return new Image.network(
        urls[index],
        fit: BoxFit.cover,
      );
    });
  }
}

实际上GridView和ListView是一样的，有些属性大家可以去官方文档看看，然后试试效果，看网上很多人说Flutter嵌套很多，其实不然，只要你把组件抽出来，基本上还是可以看得，总体来说Flutter还是可以，当然这篇文章仅仅只是Flutter的冰上一角，路很长，最后英语不好的这里有中文官网。