flutter 系统widget归纳(持续更新)

2021-05-19 本文已影响0人 ProgrammerOz

SafeArea

顾名思义，安全区域，指的是除app的导航栏以及状态栏等区域，如果页面没有这个，写的内容可能会上到状态栏，下到导航栏，里面的属性一般用不到

Scaffold

相当于对每个页面一些常用的内容的封装，包含appBar(顶部标题栏)，bottomNavigationBar(app底部标题栏)，floatingActionButton(浮动按钮)，draw(抽屉模式，会默认将appbar的leading的点击事件设置为打开抽屉)，body(app内容)等

Scaffold常用属性解析

appBar
- leading：appBar的左边按钮，默认是返回，如果自定义图片后需要自己设置下返回事件，代码示例：
- title：标题内容。
- centerTitle：标题是否居中，默认false，靠左
- bottom：标题栏下方的View，一般可放个tabbar，以实现多页面切换效果

界面展示效果

image.png

代码示例

appBar: AppBar(
  leading: IconButton(
  icon: LoadAssetImage(imgPath + 'icon_left_black_24px',
    width: 24, height: 24),
    onPressed: () {
      Navigator.maybePop(context);
    },
  ),
  backgroundColor: Colors.white,
  centerTitle: true,
  title: Text(
    'Profile', //LAN
    style: TextStyle(fontSize: 18, color: Colors.black),
    ),
),

bottomNavigationBar
- items：直接放多个BottomNavigationBarItem子类的条目去实现批量重复布局，类似于原生的radiogroup+radiobutton，配合currentIndex，selectedItemColor等属性去使用
- shape：可配合child属性，对导航栏上面的界面实现任意布局，相当于原生里用layout等布局去手动实现效果

注：配合floatingActionButton可实现底部按钮凹陷效果，此时需要设置个floatingActionButtonLocation组件，该组件跟floatingActionButton平级

页面展示效果：

image.png

示例代码

bottomNavigationBar: BottomNavigationBar(
  items: const <BottomNavigationBarItem>[
  BottomNavigationBarItem(
    icon: Icon(Icons.home),
    label: 'Home',
    ),
  BottomNavigationBarItem(
    icon: Icon(Icons.business),
    label: 'Business',
    ),
  BottomNavigationBarItem(
    icon: Icon(Icons.school),
    label: 'School',
    ),
  ],
  currentIndex: 0,
  selectedItemColor: Colors.amber[800],
  // onTap: _onItemTapped,
),

页面展示效果：

image.png

示例代码：

bottomNavigationBar: BottomAppBar(
  shape: const CircularNotchedRectangle(),
  child: Row(
    children: [
      IconButton(icon: Icon(Icons.home)),
      SizedBox(),
      IconButton(icon: Icon(Icons.business))
      ],
    mainAxisAlignment: MainAxisAlignment.spaceAround,
  )
),
floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Container

最常用的容器，可定义宽高，内间距外间距，设置边框线(border),对齐方式(alignment)等属性
示例代码：

Container(
  color: Colours.dark_gray_f1,
  alignment: Alignment.centerLeft,
  padding: EdgeInsets.only(left: 15),
  decoration: new BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(25.0)),
    border: new Border.all(width: 1, color: Colors.red),
  ),
  height: 30,
  child: Text(
    itle,
    style: TextStyle(fontSize: 13, color: Colours.dark_black_666),
  ),
);

GestureDetector

手势识别器，可给任意控件增加点击事件onTap(){},当你发现条目使用了这个包装后，空白处无法点击需要增加该属性 behavior: HitTestBehavior.opaque
示例代码如下:

GestureDetector(
  behavior: HitTestBehavior.opaque,
  child: Container(),
  onTap: () {
    //do something
  }
)

Expanded

展开widget，一般用在Row，Column里，可将不确定高度的组件自适应展开

ListView

列表，可当ScrollView使用，批量创建列表的时候用ListView.separated(itemBuilder:,separatorBuilder:,itemCount:)，itemBuilder是每个条目的样式，separatorBuilder是分割线的样式，itemCount是条目数量，如果每个条目需要手动创建的话就用ListView(children: [])，如果不能完全展示，就手动指定高度，或者使用Expanded来把他展开
示例代码(仅提供separated方式实现)：

ListView.separated(
  itemBuilder: (BuildContext context, int index) =>_buildBankCardItem(cardData[index], controllers[index]),
  eparatorBuilder: (BuildContext context, int index) =>Container(),
  itemCount: cardData == null ? 0 : cardData.length
)

Tabbar

可放在appbar的bottom里(请翻阅前面的appbar模块)，也可直接放在appbar中间(不写title，直接使用appbar里的flexibleSpace属性)，常用属性有controller，isScrollable(是否可滚动)，tabs(具体的tab集合)，indicatorColor(指示器颜色)，indicatorWeight(指示器高度)，indicatorPadding(指示器内间距)，indicator(自定义指示器样式)，indicatorSize(指示器宽度)，labelColor(文本颜色)，labelStyle(文本样式)，labelPadding(文本内边距)，unselectedLabelColor(未选中文本的颜色)，unselectedLabelStyle(未选中文本的样式)，onTap(回调监听)
body里可用TabBarView形成联动效果

页面效果展示:

image.png

示例代码：

appBar: AppBar(
  flexibleSpace: Container(
  alignment: Alignment.center,
  child: TabBar(
    controller: _tabController,
    labelColor: Colours.purple_color,
    unselectedLabelColor: Colours.black_333,
    indicatorColor: Colours.purple_color,
    labelStyle: TextStyle(fontSize: 16),
    tabs: [
      Tab(
         text:'Deposit',
      ),
      Tab(
        text: 'Transfer',
      )
    ],
    isScrollable: true,
    ),
  ),
  backgroundColor: Colours.white_color,
)

TextField

输入框，常用属性controller，focusNode，decoration(装饰器)，onChanged(内容变化监听)，obscureText(是否隐藏文本，密码隐藏时候可用)，keyboardType(键盘类型)，textInputAction(键盘右下角的按钮)，maxLength(最大长度，设置后会有默认计数器)
- 重点说下decoration:InputDecoration，InputDecoration常用属性:counter(自定义计数器)，
  - 图标：icon(左侧外图标)，prefixIcon(左侧内图标)，suffixIcon(右侧内图标)
  - textCapitalization(首字母大小写)：worlds(单词首字母大写)，sentences(句子的首字母大写)，characters(所有字母大写)，none(默认无)
  - 提示文字：labelText(悬浮提示)，errorText(错误提示)，helperText(帮助提示文字)，hintText(默认提示)，
  - 去掉下划线：decoration: InputDecoration.collapsed(),或者decoration:null(该方式没有提示文字)
  - 边框：border:InputBorder.none，UnderlineInputBorder(下划线)，OutlineInputBorder(外边框)，
  - 关闭软键盘：focusNode.unFocus()，

showCupertinoDialog

显示IOS风格的弹框CupertinoAlertDialog
- 常用属性content(弹框的具体样式，可使用自带的CupertinoAlertDialog，也可使用自定义布局)，actions(点击事件，里面可放CupertinoDialogAction数组)

页面效果展示：

image.png

示例代码:

showCupertinoDialog(context: widgetContext,builder: (context) {
  return CupertinoAlertDialog(
    title: Text('确认删除'),
    actions: [
      CupertinoDialogAction(
        child: Text('确认'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
      CupertinoDialogAction(
        child: Text('取消'),
        isDestructiveAction: true,
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    ],
    );
  },
);

页面效果展示：

image.png

示例代码：

showCupertinoDialog(context: widgetContext,builder: (context) {
  return CupertinoAlertDialog(
    title: Text('请评价'),
    content: Text('\n我们很重视您的评价！'),
    actions: [
      CupertinoDialogAction(
        child: Text('非常好'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
      CupertinoDialogAction(
        child: Text('一般'),
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
      CupertinoDialogAction(
        child: Text('非常差'),
        isDestructiveAction: true,
        onPressed: () {
          Navigator.of(context).pop();
        },
      ),
    ],
    );
  },
);

showGeneralDialog

居中弹框

showModalBottomSheet

底部弹框

自定义dialog

页面显示效果：

image.png

示例代码：

import 'package:flutter/material.dart';
class LoadingDialog extends Dialog {
  String text;
  LoadingDialog({Key key, @required this.text}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return new Material(
      //创建透明层
      type: MaterialType.transparency, //透明类型
      child: new Center(
        //保证控件居中效果
        child: new SizedBox(
          width: 100.0,
          height: 100.0,
          child: new Container(
            decoration: ShapeDecoration(
              color: Color(0xffffffff),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(8.0),
                ),
              ),
            ),
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                new CircularProgressIndicator(),
                new Padding(
                  padding: const EdgeInsets.only(
                    top: 20.0,
                  ),
                  child: new Text(
                    text,
                    style: new TextStyle(fontSize: 12.0),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

flutter 系统widget归纳(持续更新)

SafeArea

Scaffold

Scaffold常用属性解析

Container

GestureDetector

Expanded

ListView

Tabbar

TextField

showCupertinoDialog

showGeneralDialog

showModalBottomSheet

自定义dialog

猜你喜欢

热点阅读