Widget组成的Fultter界面设计灵感来自于React

Widget的分类

fultter自学教程:https://www.aiyexue.com/mobile/154.html

Widget的分类有很多类别,每个类别下面又包含很多Widget,主要包括以下几种类别:

  • Basics:在构建第一个Flutter应用程序之前,需要知道的Basics Widget。

  • Material Components:Material Design风格的Widget。

  • Cupertino:iOS风格的Widget。

  • Accessibility:辅助功能Widget。

  • Animation and Motion:动画和动作Widget。

  • Async:Flutter应用程序的异步Widget。

  • Input:除了在Material Components和Cupertino中的输入Widget外,还可以接受用户输入的Widget。

  • Interaction Models:响应触摸事件并将用户路由到不同的视图中。

  • Layout:用于布局的Widget。

  • Painting and effects:不改变布局、大小、位置的情况下为子Widget应用视觉效果。

  • Scrolling:滚动相关的Widget。

  • Styling:主题、填充相关Widget。

  • Text:显示文本和文本样式。

现有Widget组合自定义Widget

现有Widget组合即是根据前面所介绍的基础Widget根据需求来组合成一个通用的Widget,这样在使用过程中避免设置过多的属性,且增强其复用性。 比如,在实际开发中,我们经常会碰到一个Icon和一个标题组合而成的UI,且这个组合的区块可以处理点击事件,那么我们就可以根据现有Icon和Text widget组合成通用的类似UI组件。

首先创建一个单独的dart文件来实现该自定义Widget,比如命名为custom_combined_widget.dart

import 'package:flutter/material.dart';

class CustomCombinedWidget extends StatefulWidget {

  final IconData iconData;
  final String title;
  final GestureTapCallback onTap;

  const CustomCombinedWidget({Key key, this.iconData, this.title, this.onTap}): super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return CustomCombinedWidgetState();
  }

}

class CustomCombinedWidgetState extends State<CustomCombinedWidget> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GestureDetector(
      onTap: this.widget.onTap,
      child: Column(
        children: <Widget>[
          Icon(this.widget.iconData, size: 45.0,),
          Text(this.widget.title == null ? "" : this.widget.title, style: TextStyle(fontSize: 14.0, color: Colors.black),),
        ],
      ),
    );
  }

}

上述代码中我们自定义了一个CustomCombinedWidget,这里面Icon的大小和标题的文本大小、颜色都是定好的,所以在使用时无法改变这些值,如果想在使用过程中改变这些值则需要从外部传值进来,比如标题的文本内容、icon和该Widget点击事件回调就是通过外部使用者传入的。

以上自定义Widget的使用方法如下:

//首先导入自定义Widget所在文件
import 'package:demo_module/custom_combined_widget.dart';

//在页面Widget中使用

class HomePageState extends State<HomePage> {
  String tips = '这里是提示';

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('自定义组合Widget'),
      ),
      body: Container(
        child: buildCombinedWidget(),
      ),
    );
  }

  Widget buildCombinedWidget() {
    return Center(
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              CustomCombinedWidget( //使用自定义Widget
                iconData: Icons.home,
                title: '首页',
                onTap: () {
                  setState(() {
                    this.tips = '点击了首页';
                  });
                },
              ),
              CustomCombinedWidget(
                iconData: Icons.list,
                title: '产品',
                onTap: () {
                  setState(() {
                    this.tips = '点击了产品';
                  });
                },
              ),
              CustomCombinedWidget(
                iconData: Icons.more_horiz,
                title: '更多',
                onTap: () {
                  setState(() {
                    this.tips = '点击了更多';
                  });
                },
              ),
            ],
          ),
          Padding(
            padding: EdgeInsets.only(top: 50),
            child: Text(
              this.tips,
              style: TextStyle(fontSize: 20, color: Colors.blue),
            ),
          ),
        ],
      ),
    );
  }
} 

前端 移动开发

有用 (1)

评论加载中...