Flutter 控件学习记笔记

Flutter 控件学习记笔记

1 自适应宽度流式布局

自适应宽度流式布局

Container(
  margin: EdgeInsets.only(
    top: 10.0,
  ),
  alignment: Alignment.centerLeft,
  child: Wrap(
    spacing: 8.0,
    runSpacing: 8.0,
    children: node.childNodes.map((childNode) {
      return GestureDetector(
        child: new ClipRRect(
          child: Container(
            padding: EdgeInsets.all(3.0),
            child: Text(
              childNode.name,
              style: TextStyle(
                color: Colors.white,
                shadows: [
                  Shadow(color: Colors.grey, offset: Offset(0.2, 0.2))
                ],
              ),
            ),
            color: getRandomColor(),
          ),
          borderRadius: new BorderRadius.circular(3.0),
        ),
        onTap: () {
          NavigatorRouterUtils.pushToPage(
              context,
              new ArticlePage(
                name: childNode.name,
                id: childNode.mId,
                type: ArticleType.NORMAL_ARTICLE,
              ));
        },
      );
    }).toList(),
  ),
);

也就是使用Wrap包裹的列表；

2 水波纹点击控件

InkWell(
  onTap: () {
  },
  child: Container(),
);

使用InkWell包裹即可；

3 Activity跳转动画

3.1 首先定义一个动画类型

class RouterAnim {
  static createTransition(Animation animation, Widget child) {
    return SlideTransition(
      position: new Tween(
        begin: const Offset(1.0, 0.0),
        end: const Offset(0.0, 0.0),
      ).animate(animation),
      child: child,
    );
  }
}

3.2 在Navigator中跳转并使用它

class NavigatorRouterUtils {
  /**
   * 跳转到指定page
   */
  static void pushToPage(BuildContext context, Widget page) {
    Navigator.of(context).push(new PageRouteBuilder(pageBuilder:
        (BuildContext c, Animation animation,
            Animation secondartAnimation) {
      return page;
    }, transitionsBuilder: (BuildContext c, Animation animation,
        Animation secondartAnimation, Widget child) {
      return RouterAnim.createTransition(animation, child);
    }));
  }
}

3.3 使用

下面是一个页面跳转的demo：

IconButton(
  icon: Icon(
    Icons.search,
    color: Colors.white,
  ),
  onPressed: () {
    NavigatorRouterUtils.pushToPage(context, new SearchPage());
  },
)；

4 自定义一个AppBar搜索框

AppBar搜索框

class SearchTextField extends StatelessWidget {
  final GestureTapCallback onSearchTap;
  final TextEditingController controller;
  final FocusNode focusNode;
  SearchTextField({this.controller, this.onSearchTap, this.focusNode});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      margin: EdgeInsets.only(top: 8.0, bottom: 8.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(2.0),
      ),
      child: TextField(
        focusNode: focusNode,
        controller: controller,
        autofocus: false,
        cursorColor: Colors.black,
        style: TextStyle(
          color: Colors.black,
          fontSize: 16.0,
        ),
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: '搜索一下吧.',
          hintStyle: TextStyle(
            color: Colors.grey,
          ),
          prefixIcon: GestureDetector(
            child: Icon(
              Icons.arrow_back,
              color: Colors.blue,
              size: 30.0,
            ),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          suffixIcon: GestureDetector(
            child: Icon(
              Icons.search,
              color: Colors.blue,
              size: 30.0,
            ),
            onTap: onSearchTap,
          ),
        ),
      ),
    );
  }
}

• 使用TextEditingController的text属性来回去输入的内容；
• 使用FocusNode的unFocus()方法来强制失去焦点；

在AppBar中使用：

new Scaffold(
  appBar: AppBar(
    flexibleSpace: new SearchTextField(
      onSearchTap: () {
      },
      controller: controller,
      focusNode: focusNode,
    ),
    automaticallyImplyLeading: false,
  ),
  body: contentWidget,
);

5 圆角标签

圆角标签

使用Container非常简单：

new ClipRRect(
  child: Container(
    padding: EdgeInsets.all(3.0),
    child: Text(
      childNode.name,
      style: TextStyle(
        color: Colors.white,
        shadows: [
          Shadow(color: Colors.grey, offset: Offset(0.2, 0.2))
        ],
      ),
    ),
    color: getRandomColor(),
  ),
  borderRadius: new BorderRadius.circular(3.0),
),

6 获取一个随机的颜色

引入包：

import 'dart:math';

获取随机颜色：

getRandomColor() {
  return Color.fromARGB(
      255, 
      Random.secure().nextInt(255),
      Random.secure().nextInt(255), 
      Random.secure().nextInt(255));
}

项目开源地址：Fluttter 控件学习
持续更新...