[flutter]3、flutter基础

2021-11-27 本文已影响0人史记_d5da

1、创建工程

new Project

Project Type选项

Application：创建一个flutter项目，里面包含安卓和ios项目，可以用来flutter和原生之间的交换。
Plugin：Flutter Plugin提供Android或者iOS的底层封装，在Flutter层提供组件功能，使Flutter可以较方便的调取Native的模块。
Package：Flutter纯Dart插件工程，仅包含Dart层的实现，往往定义一些公共Widget
Module：在现有的原生项目中引入flutter，有些简单的公共界面可以使用flutter来实现，双端调用，提升速度

flutter工程命名规则：小写字母或者加下划线（不可以包含大写字母）

2、flutter基本介绍

1、Container
Container：可以理解为一个盒子，可以为Container设置颜色以及其他相关属性。
1）、当Container没有子节点的情况下，Container会将自己变得极小，这里我们只要考虑到存在这个Container，但不显示。
2）、第二种是Container有子节点的情况下，Container的大小会随着子节点的大小而变化。
3）、Container中的AspectRatio影响父部件的布局，父部件的宽高确定时，AspectRatio此时无效

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.yellow,
      alignment: const Alignment(0, 0),
      width: 300,
      height: 300,
      child: Container(
        color: Colors.blue,
        height: 150,
        child: AspectRatio(
          aspectRatio: 1 / 1,
          child: Container(
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

2、SizeBox
两种用法：一是可用来设置两个widget之间的间距，二是可以用来限制子组件的大小。

SizedBox( 
            height: 10,
            child: Container( color: Colors.red),
),
SizedBox( 
            height: 10,
            child: Container( height: 20, color: Colors.red),
),

3、Row、Column、Stack、Expanded
Row 横向
Column 纵向
Stack 多层
Expanded 在主轴方向不会留下间隙，会被Expanded拉伸
1）、主轴：mainAxisAlignment
spaceBetween: 剩下的空间平均分布到小部件之间！！
spaceAround: 剩下的空间平均分布到小部件周围！！
spaceEvenly：剩下的空间和小部件一起平均分！！
start 向主轴开始的方向对齐。
end 向主轴结束的方向对齐。
center 主轴方向居中对齐。
2）、交叉轴：CrossAxisAlignment 垂直于主轴方向
baseline：文字底部对齐。
center：交叉轴方向居中对齐。
end：向交叉轴结束的方向对齐。
start：向交叉轴开始的方向对齐。
stretch：填满交叉轴方向。
注：交叉轴设置为baseline，需要设置textBaseline的属性

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: Colors.yellow,
      alignment: Alignment(0.0, 0.0),
      child: Row(
        // spaceBetween: 剩下的空间平均分配到小部件之间
        // spaceAround: 剩下的空间平均分布到小部件周围
        // spaceEvenly: 剩下的空间和小部件一起平均分配
        textDirection: TextDirection.rtl, // 在Row布局中起作用
        mainAxisAlignment: MainAxisAlignment.spaceAround , // 主轴方向
        crossAxisAlignment: CrossAxisAlignment.baseline, // 交叉轴
        textBaseline: TextBaseline.alphabetic,
        children: [
          Expanded(child: Container(color: Colors.red, child: Icon(Icons.add, size: 120),)),
          Expanded(child: Container(color: Colors.blue, child: Icon(Icons.ac_unit, size: 60),)),
          Expanded(child: Container(color: Colors.white, child: Icon(Icons.access_alarm, size: 30),)),
        ],
      ),
    );
  }
}

3）、Stack中的Positioned属性，对子部件进行绝对布局

//通过ConstrainedBox来确保Stack占满屏幕
ConstrainedBox(
  constraints: BoxConstraints.expand(),
  child: Stack(
    alignment:Alignment.center , //指定未定位或部分定位widget的对齐方式
    children: <Widget>[
      Container(
        child: Text("Hello world",style: TextStyle(color: Colors.white)),
        color: Colors.red,
      ),
      Positioned(
        left: 18.0,
        child: Text("I am Jack"),
      ),
      Positioned(
        top: 18.0,
        child: Text("Your friend"),
      )        
    ],
  ),
);

4、Scaffold
带有导航栏（appBar）的小部件
5、ListView
类似于iOS中TableView
ListView.builder(itemCount, itemBuilder)
itemCount：当前这个ListView总共多少个item
itemBuilder：返回一个函数 function(BuildContext context, int index)
6、Text
文本

class TestText extends StatelessWidget {
  final TextStyle _textStyle = TextStyle(fontSize: 16.0);
  final String _teacher = 'sj';
  final String _title = 'flutter';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: Text(
        "《$_title》---$_teacher当主方法被执行，会检测被执行的方法，判断方",
        textAlign: TextAlign.center,
        style: _textStyle,
        maxLines: 3,
        overflow: TextOverflow.ellipsis,
      ),
    );
  }

7、RichText
富文本

class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: RichText(
          text: TextSpan(
              children: <TextSpan>[
                TextSpan(
                  text: "nanjing city",
                  style: TextStyle(fontSize: 30, color: Colors.blue),
                )
              ],
              text: 'shiji teacheR',
              style: TextStyle(fontSize: 30, color: Colors.red)
          )),
    );
  }
}

8、StatefulWidget 有状态管理
有状态管理：渲染逻辑和数据逻辑分开管理

class Day03 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return StateManagerDemo();
  }
}

class StateManagerDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _SMDState();
}

// 状态管理
class _SMDState extends State<StateManagerDemo> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.grey,
        appBar: AppBar(
          title: const Text("text show"),
        ),
        body: Center(
          child: Chip(label: Text('$count')),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            this.setState(() {
              count += 1;
            });
            print("count = $count");
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

9、ThemeData

primarySwatch：设置主题册
splashColor：去掉点击的水波纹效应

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        // primarySwatch: Colors.grey, // 主题色
        highlightColor: const Color.fromRGBO(1, 0, 0, 0),
        splashColor: const Color.fromRGBO(1, 0, 0, 0), // 去掉点击的水波纹
      ),
      title: 'WechatDemo', // android小标题提示
      home: const RootPage(),
    );
  }
}

10、BottomNavigationBar底部tabbar

selectedFontSize 选中的字体大小
onTap: (index) {} 点击事件
type 类型 fixed固定的，shifting移动的
fixedColor 选中颜色
currentIndex 当前选中的index
items：底部的每一项
BottomNavigationBarItem 底部导航栏要显示的Item
- icon：图标
- label 文字

class RootPage extends StatefulWidget {
  const RootPage({Key? key}) : super(key: key);

  @override
  _RootPageState createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  int _currentIndex = 0;
  List<Widget> pages = [ChatPage(), FriendsPage(), DiscoverPage(), MinePage()];
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        body: pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          selectedFontSize: 12.0,
          onTap: (index) {
            _currentIndex = index;
            setState(() {
              _currentIndex;
            });
          },
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.green,
          currentIndex: _currentIndex,
          items: const [
            BottomNavigationBarItem(
                icon: Image(
                  height: 20,
                  width: 20,
                  image: AssetImage('images/tabbar_chat.png'),
                ),
                label: '微信'),
            BottomNavigationBarItem(icon: Icon(Icons.bookmark), label: '通讯录'),
            BottomNavigationBarItem(icon: Icon(Icons.history), label: '发现'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的')
          ],
        ),
      ),
    );
  }
}

11、GestureDetector

onTap:() {} // 点击事件
child：子部件
Navigator：导航跳转

class DiscoverCell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () { // 点击跳转
        Navigator.of(context).push( 
          MaterialPageRoute(builder:
            (BuildContext context)=> DiscoverChildPage(title: title!)
          ),
        );
      },
      child: Container(),
    );
  }
}

[flutter]3、flutter基础

1、创建工程

2、flutter基本介绍

猜你喜欢

热点阅读