Flutter的基本应用

2019-05-19  本文已影响0人  有没有口罩给我一个

如果你还没有搭建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的冰上一角,路很长,最后英语不好的这里有中文官网

上一篇下一篇

猜你喜欢

热点阅读