flutter 学习笔记

组件的使用

Text

  Text(
    'flutter demo',
    // 文本对齐方式
    textAlign: TextAlign.start,
    // 文本方向 还有rtl
    textDirection: TextDirection.ltr  
  ),

Stack层叠组件
- 定位相对于父元素
- alignment: Alignment.center // 总体控制
- alignment: Alignment(0,0) // float(-1~1) 0,0居中
- children: <Widget>[]
  - Align组件
    - alignment: Alignment.center // 单独控制
    - alignment: Alignment(0,0) // float(-1~1) 0,0居中
    - child: // 需要定位的子组件
  - Positioned组件
    - left, bottom, top, right // int 默认为0
    - child: // 需要定位的子组件
AspectRatio组件
- 默认横向占满父组件
- 可以用来控制图片
- aspectTatio: 2.0/1.0 // 宽高比
- child: // 子组件
Card组件
- margin: EdgeInsets.all(10) // 外边距
- child: // 子组件
ClipOval组件
- 可以用来裁剪原型头像
- child: // 子组件
CircleAvatar组件
- 感觉可以自适应头像大小
- backgroungImage: NetworkImage('src')
RaisedButton组件
- child: // 子组件
- textColor: Theme.of(context).accentColor, // 文字颜色
- textColor: Colors.red, // 文字颜色
- onPressed: (){} // 点击事件
Warp组件
- 相对于父组件横向占满
- 可以自动换行
- spacing: 10, // 元素和元素之间的距离
- runSpacing: 10 // 元素在纵轴之间的距离
- alignment: WarpAlignment.srart // 水平对齐方式
- runAlignment: WarpAlignment.spaceAround // 纵向对齐方式
- direction: Axis.vertical // 纵向排列
SizedBox组件
- height: 30,
- width:10,
- 空白盒子
StatefullWidget
- setState((){}) 修改需要刷新的内容,类似小程序的setData
Scaffold组件
- appBar组件
  - title: Text('text') // 标题
  - backgroundColor: Colors.red // 背景颜色
  - leading: IconButton(icon: Icon(Icons.menu), onPressed:(){}) // 左边加东西
  - actions: <Widget>[] // 右边加东西
  - centerTitle: true // 不论是不是ios都给居中显示
  - 菜单栏
```
  DefaultTabController(
    length : 2, // tab的个数
    child: Scafford(
      appBar: AppBar(
        title: Text('title'),
        bottom: TabBar(
          tabs: <Widget>[
            Tab(text:'1'),
            Tab(text:'2'),
            Tab(text:'3'),
          ]
        )
      ),
      body: TabBarView(
        children: <Widget>[
          Text('text1'),
          Text('text2'),
          Text('text3'),
        ]
      )
    )
  )
```
    - TabBar组件
      - indicatorColor: Colors.red,
      - isScrollable: true // 允许滑动
      - tabs: <Widget>[]
        
        Tab组件
        
        text:"text"
    - TabBarView组件
      - children: <Widget>[]
- body
- bottomNavigationBar组件
  - currentIndex: 0, // 当前选中的tab
  - onTap: (int index){} // 点击事件,默认参数是点击了第几个按钮
  - items: <BottomNavigationBarItem>[] // 按钮内容
    - BottomNavigationBarItem组件
      - icon: Icon(Icons.home), // 图标
      - title: Text('主页') // 文字
- floatingActionButton浮动按钮组件
  - child:
  - onPressed: (){}
Navigator路由跳转组件
```
  // 路由跳转
  Navigator.of(context).push(
    MaterialPageRoute(
      builder: (context)=> FormPage(参数)
    )
  )
  // 返回上一界面
  Navigator.of(context).pop()
  // 替换掉当前界面
  Navigator.of(context).pushReplacementNamed('/home')
  // 重置路由
  Navigator.of(context).pushAndRemoveUntil(
    new MaterialPageRoute(
      builder: (context) => new Tabs(index: 1),
    ),
    (route) => route == null
  )
```
- MaterialPageRoute
  - WidgetBuilder builder // 是一个WidgetBuilder类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。我们通常要实现此回调，返回新路由的实例。
  - RouteSettings settings // 包含路由的配置信息，如路由名称、是否初始路由（首页）。
  - bool maintainState = true, // 默认情况下，当入栈一个新路由时，原来的路由仍然会被保存在内存中，如果想在路由没用的时候释放其所占用的所有资源，可以设置maintainState为false。
  - bool fullscreenDialog = false, // 表示新的路由页面是否是一个全屏的模态对话框，在iOS中，如果fullscreenDialog为true，新页面将会从屏幕底部滑入（而不是水平方向）。

MaterialApp

debugShowCheckedModeBanner: false // 去除斜着的debug标识

routes

  routes: {
    '/form': (context) => FromPage(),
    '/search': (context) => SearchPage(),
  }

  Navigator.pushNamed(context, '/search')

  // 在跳转到的路由的build方法里写
  var args=ModalRoute.of(context).settings.arguments;
  // 就可以传输参数了
  Naviagtor.pushNamed(context, '/search', arguments:{"id": 123});

  // 或者是定义路由的时候进行传参，这样就可以正常的使用了
  routes: {
    "tip2": (context){
      return TipRoute(text: ModalRoute.of(context).settings.arguments);
    },
  },

initialRoute: '/' // 初始化加载的路由

对于路由的固定写法

  // Route.dart
  import 'package:flutter/material.dart';
  import '../pages/Tabs.dart';
  import '../pages/Search.dart';
  import '../pages/Form.dart';

  final Map<String, Function> routes = {
    '/':(contxt,{arguments})=>Tabs(),
    '/search':(contxt,{arguments}) =>SearchPage(arguments: arguments),
    '/form': (context,{arguments}) =>FormPage(arguments: arguments),
  };

  // 这个东西实际上是一个路由生成钩子，只有在没有找到指定路由的时候才会被调用，当前没有设置route所有的路由都会经过这个钩子进行处理，这里也可以当成路由守卫，判断各种权限然后进行路由的导航
  var onGenerateRoute=(RouteSettings settings) {
    // 统一处理
    final String name = settings.name;   
    final Function pageContentBuilder = routes[name];        

    if (pageContentBuilder != null) {
      if (settings.arguments != null) {
        final Route route = MaterialPageRoute(
          builder: (context) =>
            pageContentBuilder(context, arguments: settings.arguments));
        return route;
      } else {
        final Route route = MaterialPageRoute(
          builder: (context) =>
            pageContentBuilder(context));
        return route;
      }
    }
  };
  // main.dart
  import 'package:flutter/material.dart';
  import 'routes/Routes.dart';
  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        // home:Tabs(),
        initialRoute: '/',      
        onGenerateRoute: onGenerateRoute
      );
    }
  }
  // 路由跳转
  Naviagtor.pushNamed(context, '/search', arguments:{"id": 123});

资源管理 pubspec.yaml
```
flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png
```
assets指定应包含在应用程序中的文件，每个asset都通过相对于pubspec.yaml文件所在的文件系统路径来标识自身的路径。asset的声明顺序是无关紧要的，asset的实际目录可以是任意文件夹（在本示例中是assets文件夹）

7.7 KiB Raw Blame History Unescape Escape

flutter 学习笔记

组件的使用

7.7 KiB

Raw Blame History