flutter常见组件API(第一期)

发布时间:2019-06-28 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了flutter常见组件API(第一期)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

内容如果对你有帮助,帮忙点下赞,你的点赞是我更新最大的动力,谢谢啦!如果在开发的过程遇到问题可以一起讨论,可以加我的QQ群!167646174!也可以加我微信,在群里!
具体代码见github ,欢迎各位Star,以及提issues!

1.ListTile

flutter常见组件API(第一期)

效果如上:

    new  ListTile(
              // 前缀
              leading:Icon(Icons.navigation),
              // 标题
              title: Text("导航栏组件",style:TextStyle(fontWeight:FontWeight.w500)),
              // 副标题
              suBTitle: Text("常见的底部导航栏组件"),
              // 后缀
              trailing: Icon(Icons.chevron_right),
              // 点击事件
              onTap: (){
                  Navigator.push(
                  context, 
                  MATErialPageRoute(
                    builder:(context)=>new BottomNavigation()
                  )
                );
              },
              // 长按事件
              onLongPress: (){
                print("object");
              }
      )
API 作用
leading 前缀
title 标题
subtitle 副标题
trailing 后缀
onTap 点击事件
onLongPress 长按事件

2.规则的灵活导航栏

flutter常见组件API(第一期)


效果如上

@H_585_126@class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  int _currentIndex=0;
  var appBarTitle=["组件","关于"];
  var appBarIcon=[Icons.all_inclusive,Icons.blur_on];
  List<Widget> list=List();
  // 导航栏文字选中颜色
  Text getTabTitle(int curIndex){
    if(curIndex==_currentIndex){
      return new Text(appBarTitle[curIndex],
      style: new TextStyle(fontSize: 14.0,color:const Color(0xff845F3F)));
    }else{
      return new Text(appBarTitle[curIndex],
      style: new TextStyle(fontSize: 14.0, color: const Color(0xff696969)));
    }
  }

  // 小图标改变选中颜色
  Icon getIcon(int curIndex){
    if(curIndex==_currentIndex){
      return Icon(appBarIcon[curIndex],color:const Color(0xff845F3F));
    }else{
      return Icon(appBarIcon[curIndex],color:const Color(0xff696969));
    }
  }

  // 初始化方法
  @override
  void initState() {
      list
      ..add(ComponentPage())
      ..add(AboutPage());
      super.initState();
    }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: list[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(icon: getIcon(0),title: getTabTitle(0)),
          new BottomNavigationBarItem(icon: getIcon(1),title: getTabTitle(1)),
        ],
        fixedColor: Colors.orange,
        // 高亮选项
        currentIndex: _currentIndex,
        onTap: (int index){
          setState(() {
            _currentIndex=index;
          });
        },
      ),
    );
  }
}

3.floatingActionButton(不规则底部导航栏)

flutter常见组件API(第一期)

效果如上

return Scaffold(
      // 首选项
      body: _eachView[_index],
      // 浮动按钮
      floatingActionButton: FloatingActionButton(
        // 长按复选按钮显示的文字
        tooltip: "长按悬浮按钮显示",
        // 按钮里面内容
        child: Icon(
          Icons.ac_unit,
          color:Colors.white
        ),
        // 点击事件
        onPressed: (){
           Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
            return EachView('悬浮按钮新页面');
          }));
        },
      ),
      // 悬浮按钮浮动的位置
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.blue,
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.access_time),
              color: Colors.white,
              onPressed: (){
                 setState(() {
                    _index=0;             
                 });
              },
            ),
            IconButton(
              icon: Icon(Icons.accessibility),
              color: Colors.white,
              onPressed: (){
                 setState(() {
                    _index=1;             
                 });
              },
            )
          ],
        ),
      ),
    );

floatingActionButton API

API 作用
child 子视图
tooltip 长按文字提示
foregroundColor 前景色
backgroundColor 背景色
heroTag hero效果使用的tag,系统默认会给所有FAB使用同一个tag,方便做动画效果
hignlightElevation 点击时阴影值,默认12.0
onPressed 点击回调事件
mini 是否为mini,默认flase
shape 定义形状,设置shape时,默认的elevation将会失效,默认为CircleBorder
isExtended 是否为extended

4.AppBar

flutter常见组件API(第一期)

API 作用
leading 前缀,一般是一个icon
title 标题
actions 系列右边组件
flexibleSpace bottom和appBar Title之间
bottom 如图
elevation Appbar和Body整体之间那个横线阴影,默认为4,分隔开AppBar和整体内容
backgroundColor 背景色
brightness 亮度
iconTheme Icon样式
textTheme 字体样式
centerTitle 标题位置,IOS默认显示居中,AndROId靠左,设置会显示统一

5.AppBar Tabs

flutter常见组件API(第一期)


效果如上:

return MaterialApp(
      home: new DefaultTabController(
        length:choices.length,
        child: new Scaffold(
          appBar: new AppBar(
            title: Text("AppBar Tabs"),
            bottom: new TabBar(
              // tabs颜色选中颜色
              labelColor:Colors.orange,
              // tabs选中样式
              labelStyle: TextStyle(fontSize: 18),
              // tabs未选中的颜色
              unselectedLabelColor: Colors.white,
              // tabs未选中的样式
              unselectedLabelStyle: TextStyle(fontSize: 10),
              // 底部指示器的padding
              indicatorPadding: const EdgeInsets.all(0),
              // 底部指示器高度
              indicatorWeight: 2,
              //底部指示器颜色
              indicatorColor: Colors.red,
              // 指示器大小计算方式
              // indicatorSize: ,
              // 是否可滚动
              // isScrollable: true,
               tabs: <Widget>[
                 Tab(text: "推荐",icon:Icon(Icons.ac_unit)),
                 Tab(text: "关注",icon:Icon(Icons.access_alarm)),
                 Tab(text: "热榜",icon:Icon(Icons.access_time)),
               ],
              
            ),
          ),
          // tabs主体内容
          body: new TabBarView(
            children: <Widget>[
              new TestPage(),
              new TestPage(),
              new TestPage(),
            ],
          ),
        ),
      ),
    );
API 作用
labelColor tabs颜色选中颜色
labelStyle tabs选中样式
unselectedLabelColor tabs未选中的颜色
unselectedLabelStyle tabs未选中的样式
indicatorPadding 底部指示器padding
indicatorWeight 底部指示器高度
indicatorColor 底部指示器颜色
indicatorSize 底部指示器大小计算方式
isScrollable 是否可以滚动

6.Row/Column 水平/垂直布局

flutter常见组件API(第一期)

Container(
              height: 300,
              color: Colors.yellow,
              child: Row(
                // 主轴(x)对齐方式
                mainAxisAlignment: MainAxisAlignment.center,
                // 副轴对齐方式
                crossAxisAlignment: CrossAxisAlignment.baseline,
                textBaseline: TextBaseline.alphabetic,
                children: <Widget>[
                   Container(
                    color: Colors.purple,
                    child: FlutterLogo(
                      size: 60.0,
                    ),
                  ),
                   Container(
                    color: Colors.purple,
                    child: FlutterLogo(
                      size: 60.0,
                    ),
                  ),
                  Container(
                    color: Colors.purple,
                    child: FlutterLogo(
                      size: 60.0,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              width: 800,
              height: 300,
              color: Colors.red,
              child: Column(
                // 主轴(x)对齐方式
                mainAxisAlignment: MainAxisAlignment.center,
                // 副轴对齐方式
                crossAxisAlignment: CrossAxisAlignment.center,
                textBaseline: TextBaseline.alphabetic,
                children: <Widget>[
                   Container(
                    color: Colors.purple,
                    child: FlutterLogo(
                      size: 60.0,
                    ),
                  ),
                   Container(
                    color: Colors.purple,
                    child: FlutterLogo(
                      size: 60.0,
                    ),
                  ),
                  Container(
                    color: Colors.purple,
                    child: FlutterLogo(
                      size: 60.0,
                    ),
                  ),
                ],
              ),
            ),
API 作用 可选参数
mainAxisAlignment 主轴(x)对齐方式 MainAxisAlignment.start(默认值),center,end,spaceAround,spaceBetween,spaceEvenly
crossAxisAlignment 副轴对齐方式 CrossAxisAlignment.center (默认值),start,end,stretch,baseline
textDirection 文字对齐方式 TextDirection.ltr(默认),rtl
verticalDirection 和textDirection类似 VerticalDirection.down(默认),up
mainAxisSize 子组件占主轴空间大小 MainAxisSize.max(默认),min

一点特殊说明:
CrossAxisAlignment.baseline:子部件基线对齐

值为 CrossAxisAlignment.baseline时 必须同时使用 textBaseline, 否则会报错

没有用 baseline

flutter常见组件API(第一期)

            Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  'Flutter',
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 30.0
                  ),
                ),
                Text(
                  'Flutter',
                  style: TextStyle(
                      color: Colors.blue,
                      fontSize: 20.0
                  ),
                ),
              ],
            )

用 baseline

textBaseline: TextBaseline.alphabetic(中轴对齐)

flutter常见组件API(第一期)


textBaseline: TextBaseline.ideographic(底部对齐)

flutter常见组件API(第一期)

            Row(
              crossAxisAlignment: CrossAxisAlignment.baseline,
              textBaseline: TextBaseline.alphabetic,
              children: <Widget>[
                Text(
                  'Flutter',
                  style: TextStyle(
                    color: Colors.red,
                    fontSize: 30.0
                  ),
                ),
                Text(
                  'Flutter',
                  style: TextStyle(
                      color: Colors.blue,
                      fontSize: 20.0
                  ),
                ),
              ],
            )

textDirection

Row 部件的 textDirection

TextDirection.rtl
文字从右到左排列,主轴(水平)方向 start->end 是 从右到左

flutter常见组件API(第一期)


TextDirection.ltr (默认)
从左往右排列,主轴(水平)方向 start->end 是 从左到右

flutter常见组件API(第一期)

verticalDirection

和 textDirection 类似

  1. 确定 Column 部件的垂直摆放方向
  2. 解释垂直方向的 start 和 end 方向

mainAxisSize

所有子部件占据主轴的空间大小

7.TextField

输入框

flutter常见组件API(第一期)

TextField(
                        enableInteractiveSelection: false,
                        // 禁止输入
                        enabled: true,
                        // 聚焦点颜色
                        cursorColor: Colors.red,
                        //聚焦点边角
                        cursorRadius: Radius.circular(10),
                        // 聚焦点
                        cursorWidth: 1,
                        // 自动获取焦点
                        autofocus: false,
                        // 长度限制
                        // maxLength: 5,
                        // 是否为密码
                        obscureText: false,
                        // 输入框类型
                        keyboardType:TextInputType.number,
                        // 文本对齐方式
                        textAlign: TextAlign.center,
                        // 最大行数
                        maxLines: 1,
                        // 是否自动更正
                        autocorrect:true,
                        // 值改变事件
                        onChanged:_textFieldChanged,
                        //用户完成内容
                        onSubmitted:(text){},
                        // 内容提交(按回车键)
                        onEditingcomplete:(){},
                        decoration: InputDecoration(
                            // 初始化的输入框比较高,这个解决高度
                          contentPadding: EdgeInsets.all(10.0),
                          //默认提示
                          hintText:"呵呵呵提示",
                          labelText: "输入",
                          helperText: "请输入你的输入",
                          border: OutlineInputBorder(
                            // 圆边角
                            borderRadius: BorderRadius.circular(15.0)
                          )
                        ),
                    ),
API 作用 可选参数
enableInteractiveSelection 为true的时候长按会显示系统粘贴板的内容 Boolean
enabled 禁止输入 Boolean
cursorColor 聚焦点的颜色 -
cursorRadius 聚焦点的园边角 -
cursorWidth 聚焦点宽度 -
autofocus 自动获取焦点 -
maxLength 长度限制 Number
obscureText 类型是否为密码 Boolean
keyboardType 输入框类型 -
textAlign 文本对齐方式 -
maxLines 最大行数 Number
autocorrect 是否自动更正 Boolean
onChanged 值改变事件 Func
onSubmitted 用户完内容事件 Func
onEditingComplete 内容提交Enter Func
decoration 样式装饰器 -

具体代码见github ,欢迎各位Star,以及提issues
不定期更新,根据工作繁忙程度决定.
以下是相关文章flutter常见组件之Button(第二期)

脚本宝典总结

以上是脚本宝典为你收集整理的flutter常见组件API(第一期)全部内容,希望文章能够帮你解决flutter常见组件API(第一期)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。