Flutter—SomeTips

2020-06-03  本文已影响0人  土豆骑士

1:Dart: 无析构函数

2:final const 修饰的变量,函数,会节约性能

3:可选参数 {this.name} 作为构造函数的参数

4:List<dynamic> list : dynamic 用来做泛型

5:升级flutter SDK: $ flutter upgrade

6:View——> Widget(小部件)

头文件:
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';//类比 iOS UIKIT

一行代码
void main() => runApp(MyApp());

//代码块 stless {}
class APP1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
//代码块 stful {}
class APP01 extends StatefulWidget {
  @override
  _APP01State createState() => _APP01State();
}
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(//类似OC RootVC
      debugShowCheckedModeBanner: false,
      home: Home(),
      theme: ThemeData(
        primaryColor: Colors.yellow,
      ),
    );
  }
}

7:快捷键:

8:常用Widget

Container(容器)
Text 、RichText(富文本)
SizeBox(添加空白位置)

布局widget:

Column(纵向 Y轴)
Row(横向 X轴)
Stack(重叠 Z轴的)
Center(中部)
Expanded(填充布局)
Positioned(相对布局)
Aspectratio(比例布局,宽高比例)

9:底部菜单构建: BottomNavigationBar、BottomNavigationBarItem

rerurn Scaffold(
  body: _pages[_currentIndex],
  bottomNavigationBar: BottomNavigationBar(
      onTap: (index){
        setState(() {
          _currentIndex = index;
        });
      },
      selectedFontSize: 12.0,
      currentIndex: _currentIndex,
      fixedColor: Colors.green,
      type: BottomNavigationBarType.fixed,
      items: [
        BottomNavigationBarItem(
          icon: Image.asset(// 此处需要在pubspec.yaml 配置asset 的添加
              'images/tabbar_chat.png',
              height: 20,
              width: 20,),
          activeIcon: Image.asset(
              'images/tabbar_chat_hl.png',
            height: 20,
            width: 20,
          ),
          title: Text('微信'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.bookmark), title: Text('通讯录'),
        ),

上一篇 下一篇

猜你喜欢

热点阅读