vue.js样式布局Flutter业务开发常用技巧

阴影样式中flutter和css对应关系

UI给出的css样式

width: 75px;
height: 75px;
background-color: rgba(255, 255, 255, 1);
border-radius: 4px;
box-shadow: 0px 0.5px 5px 0px rgba(0, 0, 0, 0.08);

flutter样式布局

Container(
      constraints: BoxConstraints.tightFor(width: 75, height: 75),
      margin: EdgeInsets.only(left: 0.5, right: 0.5, top: 0.5, bottom: 3),
          //阴影布局
      decoration: BoxDecoration(
        color: WBColors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Color.fromRGBO(0, 0, 0, 0.08),
            offset: Offset(0, 0.5),
            blurRadius: 5,
            spreadRadius: 0
          )
        ]
      ),
      alignment: Alignment.center,
      child: ...,
    )

对应关系

属性 css(box-shadow) flutter(boxShadow)
offset 前两个值 offset: Offset(0, 0.5)
blurRadius 第三个值 blurRadius: 5,
spreadRadius 第四个值 spreadRadius: 0
color rgba(0, 0, 0, 0.08) color: Color.fromRGBO(0, 0, 0, 0.08)

文本框边框处理

UI给定的css样式如下

width: 335px;
height: 138px;
border: 0.5px solid rgba(230, 230, 230, 1);
border-radius: 10px;

flutter处理如下

TextField(
  keyboardType: TextInputType.multiline,
  controller: textareaController,
  maxLines: 7,
  maxLength: 200,
  decoration: InputDecoration(
      //H5内的placeholder占位符
      hintText: '点击输入客户姓名...',
      //文字内边框距离
      contentPadding: 14.0,
      //未选中时候的颜色
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(5.0),
        borderSide: BorderSide(color: Color(0xFFEAEAEA), width: 0.5),
      ),
      //选中时外边框颜色
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(5.0),
        borderSide: BorderSide(color: Color(0xFFEAEAEA), width: 0.5),
      ),
      hintStyle: TextStyle(
        fontSize: 14,
        fontFamily: 'PingFangSC-Medium',
        color: Color(0xFFCCCCCC),
      ),
      counterText: '',
  ),
  onChanged: (event) {
    ///监听输入框 回传输入框的值
    model.callback(event);
  } ,
)

这种往往css一行就能搞定的代码 Flutter需要复杂的样式处理 有时候很容易出错。Flutter默认都是系统颜色蓝色的边框,不找对API的话很难修改过来边框颜色。

渐变按钮布局

UI给定的css样式

width: 335px;
height: 46px;
background: linear-gradient(98deg, rgba(242, 82, 40, 1) 0%,rgba(242, 82, 40, 1) 14.000000000000002%,rgba(252, 175, 60, 1) 94%,rgba(252, 175, 60, 1) 100%);
border-radius: 23px;

flutter布局样式

Container(
  height: 46,
  width: UIScreen.screenWidth()-30,
  decoration: BoxDecoration(
    gradient: LinearGradient(colors: [
      Color(0xFFF25228),
      Color(0xFFFCAF3C),
    ], begin: FractionalOffset(0, 1), end: FractionalOffset(1, 0)),
    borderRadius: BorderRadius.circular(23),
  ),
  child: FlatButton(
      onPressed: (){
        ///点击按钮关闭弹窗
        callback();
      },
      child: Text(
        '我已确认车况  立即取车',
        style: TextStyle(
            color: Color(0xFFFFFFFF),
            fontFamily: 'PingFangSC-Semibold',
            fontSize: 15,
            fontWeight: FontWeight.w700
        ),
      )
  ),
)

在H5里面一行样式代码搞定,但是在Flutter里面需要借助Container容器组件的decoration属性设置背景渐变。

去除Android滚动组件下拉水波纹效果

我们如果有些业务在页面中间使用了SingleChildScrollView滚动组件,在下拉是会出现如上的水波纹,在我本人看来是很丑陋的影响页面观感,那么怎么去除呢 具体操作如下:

import 'package:flutter/material.dart';
///自定义一个 NoShadowScrollBehavior 去除Android的水波纹效果
class NoShadowScrollBehavior extends ScrollBehavior {
  @override
  Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
      case TargetPlatform.macOS:
        return child;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
      case TargetPlatform.linux:
      case TargetPlatform.windows:
        return GlowingOverscrollIndicator(
          child: child,
          //不显示头部水波纹
          showLeading: false,
          //不显示尾部水波纹
          showTrailing: false,
          axisDirection: axisDirection,
          color: Theme.of(context).accentColor,
        );
    }
    return null;
  }
}
//如下调用
ScrollConfiguration(
    behavior: NoShadowScrollBehavior(),
    child: SingleChildScrollView(
      // physics: NeverScrollableScrollPhysics(),
      child: Column(
        children: <Widget>[
          buildButtonRadio(context),
          buildCondition(context),
          SizedBox(height: 100,)
        ],
      ),
    )
);

以上就是vue.js样式布局Flutter业务开发常用技巧的详细内容,更多关于Flutter业务开发样式布局技巧的资料请关注我们其它相关文章!

(0)

相关推荐

  • 详解Flutter TabLayout 布局用法

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费.开源的. 本文重点给大家介绍Flutter TabLayout 布局用法,具体内容如下所示: 先上图 顶部TabBar 使用 flutter create xxxx 创建一个项目 打开项目文件夹,在 lib 目录里创建三个 dart 文件,内容分别如下 First.dart

  • Flutter学习之构建、布局及绘制三部曲

    前言 学习Fullter也有些时间了,写过不少demo,对一些常用的widget使用也比较熟练,但是总觉得对Flutter的框架没有一个大致的了解,碰到有些细节的地方又没有文档可以查询,例如在写UI时总不知道为什么container添加了child就变小了:widget中key的作用,虽然官方有解释但是凭空来讲的话有点难理解.所以觉得深入一点的了解Flutter框架还是很有必要的. 构建 初次构建 flutter的入口main方法直接调用了runApp(Widget app)方法,app参数就是

  • flutter 实现多布局列表的示例代码

    闲来无事,写个玩安卓的首页,实现多布局.banner的效果.其中涉及知识点侧滑,pageview 切换页面,页面跳转传值及回调数据(在侧滑里).这些都是基于自己学习做的demo. 当然还有很多瑕疵需要完善. 先看效果: 这里主要讲解多布局,所以其他功能可以参考github https://github.com/chentaishan/flutter_app 多布局功能代码: @override void initState() { // TODO: implement initState sup

  • Flutter常用的布局和事件示例详解

    Flutter 项目中常用的布局详情,及封装和使用,快速开发项目. 以及手势事件和滚动事件的使用 Scaffold 导航栏的实现,有些路由页可能会有抽屉菜单(Drawer)以及底部Tab导航菜单等 const Scaffold({ Key key, this.appBar,//标题栏 this.body,//内容 this.floatingActionButton,//悬浮按钮 this.persistentFooterButtons,//底部持久化现实按钮 this.drawer,//侧滑菜单

  • Flutter布局模型之层叠定位

    Stack即层叠布局控件,能够将子控件层叠排列. Stack控件的每一个子控件都是定位或不定位,定位的子控件是被Positioned控件包裹的.Stack控件本身包含所有不定位的子控件,其根据alignment定位(默认为左上角).然后根据定位的子控件的top.right.bottom和left属性将它们放置在Stack控件上. import 'package:flutter/material.dart'; class LayoutDemo extends StatelessWidget { @

  • vue.js样式布局Flutter业务开发常用技巧

    阴影样式中flutter和css对应关系 UI给出的css样式 width: 75px; height: 75px; background-color: rgba(255, 255, 255, 1); border-radius: 4px; box-shadow: 0px 0.5px 5px 0px rgba(0, 0, 0, 0.08); flutter样式布局 Container( constraints: BoxConstraints.tightFor(width: 75, height:

  • Vue.js样式动态绑定实现小结

    在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,结合自身项目中遇到的一些情况,也参考了一些文档,针对vue.js样式的动态绑定切换做出如下小结: 动态切换的核心思想: 利用vue指令v-bind来实现动态绑定,从而设置切换不同的样式- vue的最大特点是数据驱动,利用特殊的语法将DOM"绑定"到底层数据,DOM与数据保持同步,每当数据发生变化,DOM视图就会做出相应的更新和响应,正是基于这种特性,我们得以实现class和style的动态绑定- (一定要充分理解数据驱动的含

  • vue.js学习之UI组件开发教程

    本文主要给大家介绍了关于vue.js之UI组件开发的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1. 新建组件: <script src="/public/javascripts/vue.js"></script> <style> #app1{background-color: red} #app2{background-color: blue} </style> <body> <div id=&quo

  • Vue.js 2.0和Cordova开发webApp环境搭建方法

    HTML5开发APP技术文档 一.环境参数 1.技术语言:HTML.CSS.ES6.Node.js等: 2.框架:Vue.js 2.x.Cordova: 3.开发系统:mac.windows等: 4.环境配置: node 6+ npm 3+ (最好下载Node.js官方最新版本) .jdk1.8.SDK(请直接下载Androidstudio软件官方最新版本,已集成AndroidSDk,建议以默认路径安装) . 二.系统环境变量配置(以window7为例) 1.AndroidSDK配置 A)添加用

  • 使用Vue.js开发微信小程序开源框架mpvue解析

    前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为H5,mpvue将是十分契合的一种解决方案. 目前,mpvue已经在美团点评多个实际业务项目中得到了验证,因此我们决定将其开源,希望更多技术同行一起开发,应用到更广泛的场景里去.github项目地址请参见mpvue .使用文档请参见 http://mpvue.com/. 为了帮

  • Vue.js 父子组件通讯开发实例

    vue.js,是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.(这是官方的一个解释!) 小编没使用过angularjs,也没使用过react.js,不能详细的说明三者的区别,想了解的话,在官方有一个分析,请点这里查看 小编从业前端开发也有了一年多的时间,刚开始的时候,前端开发展现的技术太多,小编有心无力,兼顾不过来,经过了解之后,还是选择了学原生js基础兼并jquery的学习上路.小编使用vue.js,也是因为业务的需求

  • vue.js开发实现全局调用的MessageBox组件实例代码

    前言 一开始接触到vue中的组件的时候,对于组件的理解还是不够充分的,最近在开发个人博客项目中,一开始就没准备使用一些现在比较流行的UI库(毕竟是个人项目,多练练手还是好的),所以需要自己开发几个全局组件,这里以MessageBox为例记录下vue.js如何开发全局组件.所谓全局变量是针对vue实例下说的,即所有的vue实际都可以运用到这个组件,局部组件就是针对某个实例来说的,只有这个vue实例下才能发挥作用,下面话不多说了,来一看看详细的介绍吧. 源码 github地址:Talk is che

  • 使用Vue.js和Flask来构建一个单页的App的示例

    在这个教程中,我们将讲解如何将vue.js单页应用与Flask后端进行连接. 一般来说,如果你只是想通过Flask模板使用vue.js库也是没有问题的.但是,实际上是一个很明显的问题那就是,Jinja(模板引擎)也和Vue.js一样采用双大括号用于渲染,但只是一个还算过的去的解决方案. 我想要一个不同的例子.如果我需要建立一个单页应用程序(应用程序使用单页组成, vue-router 在HTML5的History-mode以及其他更多好用的功能)用vue.js,由Flask提供Web服务?简单地

  • Vue.js实现无限加载与分页功能开发

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js完成一个需求的思考过程:与一些构建大型应用的高阶教程相比,又更专注于一些零碎细节的实现,方便读者快速掌握.致用. 需求分析 当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如: >数据量过大,影响加载速度 >用户体验差,很难定位到之前自己看过的某篇文章 >

  • 详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

随机推荐