一、关于组件

Flutter把内容单独抽离成一个组件
在flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget/StatefulWidget前期我们都继承StatelessWidget是无状态的,状态不可变得widget。
StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变。

二、MaterialApp和Scaffold两个组件装饰App

2-1 MaterialApp

MaterialApp是一个方便的Widget,它封装了应用程序实现Material Design所需的一些Widget。一般作为顶层的widget使用。

  1. # 常用属性
  2. home 主页
  3. title 标题
  4. theme 主题
  5. routes 路由

2-2 Scaffold(脚手架)

是Material Design布局结构的基本实现。此类提供了用于显示drawer,snackbar和底部sheet的API

  1. appBar 显示在界面顶部的一个AppBar
  2. body 当前界面所显示的主要内容Widget(小装置)
  3. drawer 抽屉菜单控件
  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(MyApp());
  5. }
  7. // 自定义组件
  8. class MyApp extends StatelessWidget {
  9.   @override
  10.   Widget build(BuildContext context) {
  11.     // TODO: implement build
  12.     return MaterialApp(
  13.         home: Scaffold(
  14.             appBar: AppBar(title: Text('Flutter Demo')), body: HomeContent()));
  15.   }
  16. }
  18. class HomeContent extends StatelessWidget {
  19.   @override
  20.   Widget build(BuildContext context) {
  21.     // TODO: implement build
  22.     return Center(
  23.         child: Text("你好",
  24.             textDirection: TextDirection.ltr,
  25.             style: TextStyle(fontSize: 40.0, color: Colors.yellow)));
  26.   }
  27. }

三、Container组件

  • 相当于div
    1. Container(
    2.   width: 100.0,
    3.   height: 100.0,
    4.   decoration: BoxDecoration(
    5.     gradient: RadialGradient(
    6.         //背景径向渐变
    7.         colors: [Colors.red, Colors.yellow],
    8.         center: Alignment.topLeft,
    9.         radius: .98),
    10.   ),
    11.   transform: Matrix4.rotationZ(.2),
    12.     //卡片倾斜变换
    13.   margin: EdgeInsets.only(top: 50.0, left: 120.0),
    14. ),

四、Image

4-1 网络图片

  1. Image.network(
  2.   "http://file02.16sucai.com/d/file/2014/0829/372edfeb74c3119b666237bd4af92be5.jpg",
  3.   width: 50,
  4.   height: 50,
  5. )

4-2 本地图片

  1. 根目录下创建images文件夹
  2. 在pubspec.yaml中的flutter部分添加如下内容：

image.png

  1. 加载图片
    1. Image(
    2. image: AssetImage("images/avatar.png"),
    3. width: 100.0
    4. );

五、ListView

  • 包裹在MaterialApp组件里
    1. class MyApp extends StatelessWidget {
    2. @override
    3. Widget build(BuildContext context) {
    4.   // TODO: implement build
    5.   return MaterialApp(
    6.     home: Scaffold(
    7.       appBar: AppBar(
    8.         title:Text("flutter"),
    9.       ),
    10.       body: HomeContent()
    11.     ),
    12.   );
    13. }
    14. }
  1. class HomeContent extends StatelessWidget{
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     // TODO: implement build
  5.     return ListView(
  6.       children: <Widget>[
  7.         ListTile(
  8.           leading: Icon(Icons.music_video,color: Color(0xffC20C0C),size: 30,),
  9.           title: Text("网易云"),
  10.           subtitle: Text("网易云音乐真的牛皮"),
  11.         ),
  12.         ListTile(
  13.           trailing: Icon(Icons.music_video,color: Color(0xffC20C0C),size: 30,),
  14.           //trailing    放在后面的
  15.           title: Text("网易云"),
  16.           subtitle: Text("网易云音乐真的牛皮"),
  17.         ),
  18.         ListTile(
  19.           leading: Icon(Icons.music_video,color: Color(0xffC20C0C),size: 30,),
  20.           title: Text("网易云"),
  21.           subtitle: Text("网易云音乐真的牛皮"),
  22.         )
  23.       ],
  24.     );
  25.   }
  26. }

六、Text

  1. return Text(
  2.       "hello world",
  3.       textDirection: TextDirection.ltr,
  4.       style: TextStyle(fontSize: 40,color: Colors.red),    
  5.     );