精华内容
下载资源
问答
  • 更多文章请查看 flutter从入门 到精通在这里使用 Container 容器来实现圆角矩形边框效果1 圆角矩形边框Container2 圆角矩形边框 Container( margin: EdgeInsets.only(left: 40, top: 40), //设置 child 居中 ...

    更多文章请查看 flutter从入门 到精通

    在这里使用 Container 容器来实现圆角矩形边框效果

    1 圆角矩形边框

    8c2781f9ab4ef48da604c6a5f9113d61.png
    Container

    2 圆角矩形边框

    aa37b5c8dd6b651edb0077176da874fe.png
            Container(
              margin: EdgeInsets.only(left: 40, top: 40),
              //设置 child 居中
              alignment: Alignment(0, 0),
              height: 50,
              width: 300,
              //边框设置
              decoration: new BoxDecoration(
                //背景
                color: Colors.white,
                //设置四周圆角 角度 这里的角度应该为 父Container height 的一半
                borderRadius: BorderRadius.all(Radius.circular(25.0)),
                //设置四周边框
                border: new Border.all(width: 1, color: Colors.red),
              ),
              child: Text("Container 的圆角边框"),
            ),
    

    3 可点击的圆角矩形边框

    使用 InkWell 来实现 ,更多关于 InkWell 可查看 flutter InkWell 设置水波纹点击效果详述

    0fb8cb5c492f782afeefb25e6f1b1846.gif
            Container(
              margin: EdgeInsets.only(left: 40, top: 40),
              child: new Material(
                //INK可以实现装饰容器
                child: new Ink(
                  //用ink圆角矩形
                  // color: Colors.red,
                  decoration: new BoxDecoration(
                    //背景
                    color: Colors.white,
                    //设置四周圆角 角度
                    borderRadius: BorderRadius.all(Radius.circular(25.0)),
                    //设置四周边框
                    border: new Border.all(width: 1, color: Colors.red),
                  ),
                  child: new InkWell(
                      //圆角设置,给水波纹也设置同样的圆角
                      //如果这里不设置就会出现矩形的水波纹效果
                      borderRadius: new BorderRadius.circular(25.0),
                      //设置点击事件回调
                      onTap: () {},
                      child: Container(
                        //设置 child 居中
                        alignment: Alignment(0, 0),
                        height: 50,
                        width: 300,
                        child: Text("点击 Container 圆角边框"),
                      )),
                ),
              ),
            ),
    

    4 可点击的圆角矩形边框

    983fde2c761647e378e12f3386e3b791.gif
            Container(
              margin: EdgeInsets.only(left: 40, top: 40),
              child: new Material(
                child: new Ink(
                  //设置背景
                  decoration: new BoxDecoration(
                    //背景
                    color: Colors.white,
                    //设置四周圆角 角度
                    borderRadius: BorderRadius.all(Radius.circular(25.0)),
                    //设置四周边框
                    border: new Border.all(width: 1, color: Colors.red),
                  ),
                  child: new InkResponse(
                    borderRadius: new BorderRadius.all(new Radius.circular(25.0)),
                    //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层
    //                highlightColor: Colors.deepPurple,
                    //点击或者toch控件高亮的shape形状
                    highlightShape: BoxShape.rectangle,
                    //.InkResponse内部的radius这个需要注意的是,我们需要半径大于控件的宽,如果radius过小,显示的水波纹就是一个很小的圆,
                    //水波纹的半径
                    radius: 300.0,
                    //水波纹的颜色
                    splashColor: Colors.yellow,
                    //true表示要剪裁水波纹响应的界面   false不剪裁  如果控件是圆角不剪裁的话水波纹是矩形
                    containedInkWell: true,
                    //点击事件
                    onTap: () {
                      print("click");
                    },
                    child: Container(
                      //设置 child 居中
                      alignment: Alignment(0, 0),
                      height: 50,
                      width: 300,
                      child: Text("点击 Container 圆角边框"),
                    ),
                  ),
                ),
              ),
            ),
     
    展开全文
  • 2 自定义 TextFeild 的下划线样式以及外边框样式 源代码一览,注释中有详细说明 import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';///整理//TextField 输入文本 decoration 配置...

    题记
    —— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。

    c200b3e0904a71f0163c927b40452dee.png

    1 引言

    1.1 情景一

    一个文本框默认情况下 可编辑 (允许输入文本的情况)获取焦点(正在输入文本)下,会有默认的一个下划线,这个下划线的颜色是获取的MaterialApp 组件中 them 配置的 textTheme 主题中的样式。

    5f9334ba0611a879745789040bc82435.png

    1.2 情景二

    当本框可编辑,但是并没有获取焦点时(也就是没在输入时),也会有一个样式如下:

    4f4b655c89db91648041e8c3f09e8b65.png


    与情景一不同的效果是下划线的样式不一样以及无光标

    1.3 情景三

    实际开发中,某些应用场景下,文本输入框是不可输入文字的(可通过配置 enabled:false), TextFeild 也会有不同的样式如下:

    732f943a8637585728d3b8064172651f.png

    综合来看,上述几种情景,TextFeild 在不同状态下都有不同的响应。

    2 自定义 TextFeild 的下划线样式以及外边框样式

    bb1f7ffe486b5fe5cf1c0322d3cd115a.png
    a921ad3b317ab661daa7bd45185cd1a2.png


    源代码一览,注释中有详细说明

    import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';///整理//TextField 输入文本 decoration 配置边框样式以及提示文本分析篇class TextFeildHomePage5 extends StatefulWidget {  @override  State createState() {    return TextFeildHomePageState();  }}class TextFeildHomePageState extends State {  ///用来控制  TextField 焦点的获取与关闭  FocusNode focusNode = new FocusNode();  ///文本输入框是否可编辑  bool isEnable = true;  @override  void initState() {    super.initState();    ///添加获取焦点与失去焦点的兼听    focusNode.addListener((){      ///当前兼听的 TextFeild 是否获取了输入焦点      bool hasFocus = focusNode.hasFocus;      ///当前 focusNode 是否添加了兼听      bool hasListeners = focusNode.hasListeners;      print("focusNode 兼听 hasFocus:$hasFocus  hasListeners:$hasListeners");    });    /// WidgetsBinding 它能监听到第一帧绘制完成,第一帧绘制完成标志着已经Build完成    WidgetsBinding.instance.addPostFrameCallback((_) {      ///获取输入框焦点      FocusScope.of(context).requestFocus(focusNode);    });  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        actions: [          FlatButton(child: Text("获取焦点"),onPressed: (){            FocusScope.of(context).requestFocus(focusNode);          },),          FlatButton(child: Text("失去焦点"),onPressed: (){            focusNode.unfocus();          },),          FlatButton(child: Text("编辑"),onPressed: (){            setState(() {              isEnable = true;            });          },),          FlatButton(child: Text("不可编辑"),onPressed: (){            setState(() {              isEnable = false;            });          },),        ],      ),      body: Container(        ///SizedBox 用来限制一个固定 width height 的空间        child: SizedBox(          width: 400,          height: 130,          child: Container(            color: Colors.white24,            ///距离顶部            margin: EdgeInsets.only(top: 30),            padding: EdgeInsets.all(10),            ///Alignment 用来对齐 Widget            alignment: Alignment(0, 0),            ///文本输入框            child: TextField(              ///是否可编辑              enabled: isEnable,              ///焦点获取              focusNode: focusNode,              ///用来配置 TextField 的样式风格              decoration: InputDecoration(                ///设置输入文本框的提示文字                ///输入框获取焦点时 并且没有输入文字时                hintText: "请输入用户名",                ///设置输入文本框的提示文字的样式                hintStyle: TextStyle(color: Colors.grey,textBaseline: TextBaseline.ideographic,),                ///输入框内的提示 输入框没有获取焦点时显示                labelText: "用户名",                labelStyle: TextStyle(color: Colors.blue),                ///显示在输入框下面的文字                helperText: "这里是帮助提示语",                helperStyle: TextStyle(color: Colors.green),                ///显示在输入框下面的文字                ///会覆盖了 helperText 内容                errorText: "这里是错误文本提示",                errorStyle: TextStyle(color: Colors.red),                ///输入框获取焦点时才会显示出来 输入文本的前面                prefixText: "prefix",                prefixStyle: TextStyle(color: Colors.deepPurple),                ///输入框获取焦点时才会显示出来 输入文本的后面                suffixText: "suf ",                suffixStyle: TextStyle(color: Colors.black),                ///文本输入框右下角显示的文本                ///文字计数器默认使用                counterText: "count",                counterStyle:TextStyle(color: Colors.deepPurple[800]),                ///输入文字前的小图标                prefixIcon: Icon(Icons.phone),                ///输入文字后面的小图标                suffixIcon: Icon(Icons.close),                ///与 prefixText 不能同时设置//                prefix: Text("A") ,                /// 与 suffixText 不能同时设置//                suffix:  Text("B") ,                ///设置边框                ///   InputBorder.none 无下划线                ///   OutlineInputBorder 上下左右 都有边框                ///   UnderlineInputBorder 只有下边框  默认使用的就是下边框                border: OutlineInputBorder(                  ///设置边框四个角的弧度                  borderRadius: BorderRadius.all(Radius.circular(10)),                  ///用来配置边框的样式                  borderSide: BorderSide(                    ///设置边框的颜色                    color: Colors.red,                    ///设置边框的粗细                    width: 2.0,                  ),                ),                ///设置输入框可编辑时的边框样式                enabledBorder: OutlineInputBorder(                  ///设置边框四个角的弧度                  borderRadius: BorderRadius.all(Radius.circular(10)),                  ///用来配置边框的样式                  borderSide: BorderSide(                    ///设置边框的颜色                    color: Colors.blue,                    ///设置边框的粗细                    width: 2.0,                  ),                ),                disabledBorder: OutlineInputBorder(                  ///设置边框四个角的弧度                  borderRadius: BorderRadius.all(Radius.circular(10)),                  ///用来配置边框的样式                  borderSide: BorderSide(                    ///设置边框的颜色                    color: Colors.red,                    ///设置边框的粗细                    width: 2.0,                  ),                ),                ///用来配置输入框获取焦点时的颜色                focusedBorder: OutlineInputBorder(                  ///设置边框四个角的弧度                  borderRadius: BorderRadius.all(Radius.circular(20)),                  ///用来配置边框的样式                  borderSide: BorderSide(                    ///设置边框的颜色                    color: Colors.green,                    ///设置边框的粗细                    width: 2.0,                  ),                ),              ),            ),          ),        ),      ),    );  }}
    展开全文
  • 背景知识视频教程学习Flutter&Dart构建iOS和Android应用 - 国外课栈​viadean.comFlutter&Dart-完整的Flutter应用开发课程 - 国外课栈​viadean.comFlutter的实际项目 - 国外课栈​viadean.com介绍在以下屏幕截图...

    背景知识视频教程

    学习Flutter&Dart构建iOS和Android应用 - 国外课栈viadean.com
    16ed86642e4fad5d6f2b451232372ecf.png
    Flutter&Dart-完整的Flutter应用开发课程 - 国外课栈viadean.com
    79f2a53f405cb5c323b8e2a5e30919f6.png
    Flutter的实际项目 - 国外课栈viadean.com
    b86b7a448a614c7c687b51560f2c53aa.png

    介绍

    在以下屏幕截图中,您可以看到我们将在第一部分中构建的布局。 为了使您更容易理解该布局需要做什么,我添加了边框,以显示小部件将如何放置在屏幕上:

    我相信构建此布局的最简单方法是结合使用列和行小部件。 此屏幕中的主容器窗口小部件将是一列,将空间分成三部分,如下所示:

    1. 顶部的三个按钮:“工作”,“短暂休息”和“长时间休息”
    2. 中间的计时器
    3. 底部的两个按钮:“停止”和“重新启动”

    在您最喜欢的编辑器中,创建一个新应用。

    将新应用命名为production_timer

    在main.dart文件中,删除示例代码。

    输入以下代码:

    </>

    这段代码创建了一个基本的脚手架,这是我们大多数屏幕的基本布局,并在AppBar(我的工作计时器)中放置了一个标题,并在主体的中央放置了一个文本(同样是My Work Timer)。 结果应类似于以下屏幕截图:

    接下来,让我们在main.dart文件底部为屏幕布局创建一个类,而不仅仅是返回Text。 我们将其称为TimerHomePage()。 如果您使用的是VS Code,Android Studio或IntelliJ IDEA,则还可以使用stless快捷方式使框架编写代码的一部分。 MyApp类结束后,只需键入stless。

    至于类名,让我们选择TimerHomePage。 最终结果应如下:

    </>

    在build()方法中,不返回容器,而是从MyApp类中移动Scaffold:在appBar中,我们将显示应用程序的标题,在主体中将显示包含Column的Center小部件。 在TimerHomePage类中添加以下代码:

    </>

    我们可以通过调用刚刚创建的新类来简化MyApp类的build()方法上的代码,如下所示:

    home: TimerHomePage(),

    如果您立即尝试使用该应用程序,则应该仍然像以前一样看到一个空白屏幕,显示“我的工作计时器”应用程序栏标题。

    现在,我们准备开始在屏幕上放置小部件。 由于我们需要构建五个具有非常相似功能的按钮小部件,因此最好为这些小部件创建一个新类,以保持其余代码的简洁性并节省一些键入操作。

    让我们在应用程序的lib文件夹中创建一个名为widgets.dart的新文件,如下所示:

    在这里,我们将创建一个名为ProductivityButton的新无状态小部件。 这将显示四个字段:颜色,文本,大小和Callback方法,以及用于设置值的构造函数。 小部件的代码如下:

    </>

    您可能已经注意到,参数包含在大括号({})中,并带有@required批注。 这是因为我们在这里使用命名参数。 使用命名参数的目的是在调用函数并传递值时,还指定要设置的参数的名称。 例如,当创建ProductivityButton的实例时,可以使用语法ProductivityButton(颜色:Colors.blueAccent,文本:“ Hello World”,onPressed:doSomething,大小:150)。 由于命名参数是按名称引用的,因此可以按任何顺序使用它们。

    命名参数是可选的,但是您可以使用@required注释对它们进行注释,以指示该参数是必需的。

    现在,我们已经创建了通用按钮小部件,我们需要在屏幕上放置按钮的一些实例。

    顶部按钮应放在屏幕顶部的单行中。 它们应占据所有可用的水平空间,并为边缘留出一些空间,并且它们应根据屏幕的大小和方向来改变其宽度。

    创建一个临时的空方法,以使方法可以传递给按钮。 我们稍后将其删除。 在MyApp类的底部添加以下代码:

    void emptyMethod() {}

    在MyApp类的顶部,让我们为要在屏幕上使用的默认填充声明一个常量,如下所示:

    final double defaultPadding = 5.0;

    现在,让我们在屏幕上放置顶部按钮:我们需要在此处使用Row小部件,并将其作为Column小部件的第一个元素。 在Flutter中,实际上可以将“行”窗口小部件包含到“列”窗口小部件中,反之亦然。

    我们希望按钮占用所有可用的水平空间。 为此,我们将使用扩展的小部件,该小部件在放置固定元素之后会占用列(或行)的所有可用空间。 每个按钮都有一个前导和尾随的填充,以在元素之间创建一些空间。 编写代码以将前三个按钮添加到屏幕,如下所示:

    </>

    尝试该应用。 前面的代码的结果应类似于以下屏幕截图:

    计时器应放置在屏幕中间,并在放置大小固定的顶部和底部行之后占用所有剩余空间。 现在,我们将仅在“列”小部件下使用“ Hello”文本作为占位符。 请注意,在这种情况下,在列而不是行中使用了Expanded,因此它占用了所有垂直可用空间,如以下代码段所示:

    Expanded(child: Text("Hello")),

    然后,我们将剩余的两个按钮“停止”和“重新启动”放置在屏幕底部,它们还将占据所有水平空间,除了它们和屏幕边框之间的一些填充外,如以下代码所示 块:

    Row(children: [
    Padding(padding: EdgeInsets.all(defaultPadding),),
    Expanded(child: ProductivityButton(color: Color(0xff212121),
    text: 'Stop', onPressed: emptyMethod)),
    Padding(padding: EdgeInsets.all(defaultPadding),),
    Expanded(child: ProductivityButton(color: Color(0xff009688),
    text: 'Restart', onPressed: emptyMethod)),
    Padding(padding: EdgeInsets.all(defaultPadding),),
    ],)

    最终结果应类似于以下屏幕截图:

    在您的应用中安装percent_indicator软件包

    在Flutter中使用流和异步编程

    在主屏幕上显示时间:StreamBuilder

    启用按钮

    导航到设置路线

    建立设置屏幕布局

    使用shared_preferences读写应用程序数据

    源代码

    Flutter作息定时器 appviadean.com
    3579c5587b3568a804b850ff3e8d4af5.png
    展开全文
  • Flutter系列 --- widget 其他系列传送门如下Flutter系列 --- 环境配置 Flutter系列 --- 第一个FlutterAPP 配合Dart系列食用更佳Dart (一) 语法预览 Dart (二) 语法预览 Dart (三) 语法预览 Flutter的中心思想就是用...

    6898f5eecc52c20515ee6a367f29aa0f.png

    Flutter系列 --- widget

    其他系列传送门如下

    Flutter系列 --- 环境配置
    Flutter系列 --- 第一个FlutterAPP

    配合Dart系列食用更佳

    Dart (一) 语法预览
    Dart (二) 语法预览
    Dart (三) 语法预览

    Flutter的中心思想就是用widget构建你的UIWidget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时,widget会重新构建UIFlutter会对比前后变化的不同, 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改(译者语:类似于React/Vue中虚拟DOMdiff算法)。

    Hello world

    创建项目请参考Flutter系列 --- 第一个FlutterAPP

    修改yourpath/lib/main.dart

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(
        new Center(
          child: new Text(
            'Hello, world!',
            textDirection: TextDirection.ltr,
          ),
        ),
      );
    }

    当前runApp函数接受给定的widget并使其成为widget树的根(框架强制根widget覆盖整个屏幕)。我们当前的由两个widget组成: CenterText。故而上述代码最终在我们的APP中显示:屏幕居中的一句hello worldwidget主要分为有状态的(StatefulWidget)和无状态的(StatelessWidget)。当然,具体要使用哪一种还是要取决于你当前widget的一个逻辑需要。widget主要是实现一个build函数,用于构建自身。通常一个widget是由多个级别较低的widget来共同组成的。而Flutter则依次构建这些widget,直到构建到最底层的widget(这些最底层的widget被称为RenderObject,用于计算并描述widget的几何形状。)

    基础Widget

    Flutter有一套丰富、强大的基础widget(你可以理解为类似rn提供的一套无差别的基础组件)。以下为一些常用的: Text: 创建一个带格式的文本 RowColumn: 这些具有弹性空间的布局类Widget可让您在水平(Row)和垂直(Column)方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。 Stack: 线性布局,Stack允许子widget堆叠, 你可以使用Positioned来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位(absolute positioning )布局模型设计的。 Container: Container可让您创建矩形视觉元素。container可以装饰为一个BoxDecoration, 如background、一个边框、或者一个阴影。Container也可以具有边距(margins)、填充(padding)和应用于其大小的约束(constraints)。另外,Container可以使用矩阵在三维空间中对其进行变换。
    举个栗子:

    import 'package:flutter/material.dart';
    
    class MyAppBar extends StatelessWidget {
      MyAppBar({this.title});
    
      // Widget子类中的字段往往都会定义为"final"
    
      final Widget title;
    
      @override
      Widget build(BuildContext context) {
        return new Container(
          height: 56.0, // 单位是逻辑上的像素(并非真实的像素,类似于浏览器中的像素)
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          decoration: new BoxDecoration(color: Colors.blue[500]),
          // Row 是水平方向的线性布局(linear layout)
          child: new Row(
            //列表项的类型是 <Widget>
            children: <Widget>[
              new IconButton(
                icon: new Icon(Icons.menu),
                tooltip: 'Navigation menu',
                onPressed: null, // null 会禁用 button
              ),
              // Expanded expands its child to fill the available space.(这里有点flex:1的感觉,大家可以多做实验可以找到规律。)Expanded可以拥有多个children,通过flex来分配他们的大小。
              new Expanded(
                child: title,
              ),
              new IconButton(
                icon: new Icon(Icons.search),
                tooltip: 'Search',
                onPressed: null,
              ),
            ],
          ),
        );
      }
    }
    
    class MyScaffold extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // Material 是UI呈现的“一张纸”
        return new Material(
          // Column is 垂直方向的线性布局.
          child: new Column(
            children: <Widget>[
              new MyAppBar(
                title: new Text( // 这个地方将Text这个Widget作为参数传递给了MyAppBar这个widget共同制作出了title。有点类似前端框架里面高阶组件中wrapper的写法。
                  'Example title',
                  style: Theme.of(context).primaryTextTheme.title,
                ),
              ),
              new Expanded(
                child: new Center(
                  child: new Text('Hello, world!'),
                ),
              ),
            ],
          ),
        );
      }
    }
    
    void main() {
      runApp(new MaterialApp(
        title: 'My app', // used by the OS task switcher
        home: new MyScaffold(),
      ));
    }

    上述代码中我们使用了一些Material icons,需要在pubspec.yaml做如下配置:

    name: my_app
    flutter:
      uses-material-design: true

    为了继承主题,widget需要位于MaterialApp内才能正常显示。故而有:

    ....
    void main() {
      runApp(new MaterialApp(
        title: 'My app', // used by the OS task switcher
        home: new MyScaffold(),
      ));
    }

    使用Material组件

    上面有讲到,MaterialMaterialApp widget开始。该widget在应用程序的根部创建一些有用的widget。 我们这里说一下Navigator: 它是用来管理由字符串标识组成的widget栈(即页面路由栈)。用以帮助我们的让页面在APP中平滑的过渡。

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(new MaterialApp(
        title: 'Flutter Tutorial',
        home: new TutorialHome(),
      ));
    }
    
    // 这里创建的为一个无状态的widget
    class TutorialHome extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        //Scaffold是Material中主要的布局组件.
        return new Scaffold(
          appBar: new AppBar(
            leading: new IconButton(
              icon: new Icon(Icons.menu),
              tooltip: 'Navigation menu',
              onPressed: null,
            ),
            title: new Text('Example title'),
            actions: <Widget>[
              new IconButton(
                icon: new Icon(Icons.search),
                tooltip: 'Search',
                onPressed: null,
              ),
            ],
          ),
          //body占屏幕的大部分
          body: new Center(
            child: new Text('Hello, world!'),
          ),
          floatingActionButton: new FloatingActionButton(
            tooltip: 'Add', // used by assistive technologies
            child: new Icon(Icons.add),
            onPressed: null,
          ),
        );
      }
    }
    吐槽一下,写Flutter真的是会new哭。

    处理手势

    (:зゝ∠) 手势算APP交互里最常见的一种了。我们在构建交互式应用程序的第一步是检测输入手势。让我们通过创建一个简单的按钮来了解它的工作原理:

    class MyButton extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new GestureDetector( // 本身GestureDetector是不具备显示效果的,只是用来检测用户的手势的。
          onTap: () {
            print('MyButton was tapped!');
          },
          child: new Container(
            height: 36.0,
            padding: const EdgeInsets.all(8.0),
            margin: const EdgeInsets.symmetric(horizontal: 8.0),
            decoration: new BoxDecoration(
              borderRadius: new BorderRadius.circular(5.0),
              color: Colors.lightGreen[500],
            ),
            child: new Center(
              child: new Text('Engage'),
            ),
          ),
        );
      }
    }
    // 整个代码解读: 当用户点击container时GestureDetector会调用onTap回调并调用print在控制台打印一行字符串。很多widget都会使用GestureDetector为其提供一些方法。比如上述示例中button的onPress这些方法

    根据用户输入更改widgetStatefulWidget

    无状态的widgetStatelessWidget): 主要是从他们的父widget接收参数并存储到final类型的成员变量中。当其要求被创建时,则使用存储的这些成员变量用于构建。
    有状态的widgetStatefulWidget): 他知道如何生成state对象,并使用它保存状态。

    // 下方的RaisedButton是Material中提供的一个Button widget
    class Counter extends StatefulWidget {
      // This class is the configuration for the state. It holds the
      // values (in this nothing) provided by the parent and used by the build
      // method of the State. Fields in a Widget subclass are always marked "final".
    
      @override
      // 温习一下: _ 开头的变量都会自动变为私有类型。
      _CounterState createState() => new _CounterState();
    }
    
    class _CounterState extends State<Counter> {
      int _counter = 0;
    
      void _increment() {
        setState(() {
          // This call to setState tells the Flutter framework that
          // something has changed in this State, which causes it to rerun
          // the build method below so that the display can reflect the
          // updated values. If we changed _counter without calling
          // setState(), then the build method would not be called again,
          // and so nothing would appear to happen.
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        // This method is rerun every time setState is called, for instance
        // as done by the _increment method above.
        // The Flutter framework has been optimized to make rerunning
        // build methods fast, so that you can just rebuild anything that
        // needs updating rather than having to individually change
        // instances of widgets.
        return new Row(
          children: <Widget>[
            new RaisedButton(
              onPressed: _increment,
              child: new Text('Increment'),
            ),
            new Text('Count: $_counter'),
          ],
        );
      }
    }

    由于具有不同的生命周期,statestatefulWidget是单独的两个对象: widget是临时对象,用于构建当前状态下的应用程序。 state则在多次build()保持不变,用于记录状态。
    上述例子中,用户通过点击Button来使_counter递增,并在其build方法中使用了当前变量_couter。这里,我们可以确定: 父组件(_CounterState),子组件为widget,父组件拥有state即当前的_couter,而子组件通过方法_increment来和父组件通信用于达到更改_counter的效果,当state更改的同时,子组件的引用_counter也会更新,进而视图也会更新。这里的通信方式和单向数据流的React类似: 父组件和子组件进行通进行是通过state(父组件拥有的state)。而子组件和父组件通信则通过事件。

    敲黑板: 在Flutter中,事件流是“向上”传递的,而状态流是“向下”传递的

    我们看一个复杂的栗子:

    class CounterDisplay extends StatelessWidget {
      CounterDisplay({this.count});
    
      final int count;
    
      @override
      Widget build(BuildContext context) {
        return new Text('Count: $count');
      }
    }
    
    class CounterIncrementor extends StatelessWidget {
      CounterIncrementor({this.onPressed});
    
      final VoidCallback onPressed;
    
      @override
      Widget build(BuildContext context) {
        return new RaisedButton(
          onPressed: onPressed,
          child: new Text('Increment'),
        );
      }
    }
    
    class Counter extends StatefulWidget {
      @override
      _CounterState createState() => new _CounterState();
    }
    
    class _CounterState extends State<Counter> {
      int _counter = 0;
    
      void _increment() {
        setState(() {
          ++_counter;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return new Row(children: <Widget>[
          new CounterIncrementor(onPressed: _increment),
          new CounterDisplay(count: _counter),
        ]);
      }
    }

    上述的栗子是对上上一个栗子的封装版,将一些业务逻辑封装到了两个无状态的widget,用于简化父项。让逻辑更加清晰,这也是面向对象编程的一个特点。


    整合上述

    我们来维护一个简单的购物车:

    ShoppingListItem

    class Product {
      const Product({this.name});
      final String name;
    }
    
    typedef void CartChangedCallback(Product product, bool inCart);
    
    class ShoppingListItem extends StatelessWidget {
      ShoppingListItem({Product product, this.inCart, this.onCartChanged})
          : product = product,
            super(key: new ObjectKey(product));
    
      final Product product;
      final bool inCart;
      final CartChangedCallback onCartChanged;
    
      Color _getColor(BuildContext context) {
        // The theme depends on the BuildContext because different parts of the tree
        // can have different themes.  The BuildContext indicates where the build is
        // taking place and therefore which theme to use.
    
        return inCart ? Colors.black54 : Theme.of(context).primaryColor;
      }
    
      TextStyle _getTextStyle(BuildContext context) {
        // inCart 主要用来控制商品项的主题色,存在则为主色,不存在则为灰色。
        if (!inCart) return null;
    
        return new TextStyle(
          color: Colors.black54,
          decoration: TextDecoration.lineThrough,
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return new ListTile(
          onTap: () { // 当用户点击列表项时,`widget`不会直接更改当前项的`inCart`值,而是通过onCartChanged`回调来和父类通信。当父类接收到会更新内部状态而创建一个新的实例,由于`Flutter`的`diff`算法,开销其实很小。
            onCartChanged(product, !inCart);
          },
          leading: new CircleAvatar(
            backgroundColor: _getColor(context),
            child: new Text(product.name[0]),
          ),
          title: new Text(product.name, style: _getTextStyle(context)),
        );
      }
    }
    敲黑板: 上述子类点击按钮通过事件和父类通信更改状态这种行为,可让您在widget层次结构中存储更高的状态,从而使状态持续更长的时间。在极端情况下,存储传给runApp应用程序的widget的状态将在的整个生命周期中持续存在。

    看父类:

    class ShoppingList extends StatefulWidget {
      ShoppingList({Key key, this.products}) : super(key: key);
    
      final List<Product> products;
    
      // The framework calls createState the first time a widget appears at a given
      // location in the tree. If the parent rebuilds and uses the same type of
      // widget (with the same key), the framework will re-use the State object
      // instead of creating a new State object.
    
      @override
      // 首次构建时,会通过createState创建一个_ShoppingListState与其树相应位置进行关联。当重建时,父级会重用当前_ShoppingListState来构建实例。
      _ShoppingListState createState() => new _ShoppingListState();
    }
    
    class _ShoppingListState extends State<ShoppingList> {
      Set<Product> _shoppingCart = new Set<Product>();
    
      void _handleCartChanged(Product product, bool inCart) {
        // 此方法即为传递给子类的onCartChanged。通过调用setState来更新父类的state进而达到更新界面的效果。
        setState(() {
          // When user changes what is in the cart, we need to change _shoppingCart
          // inside a setState call to trigger a rebuild. The framework then calls
          // build, below, which updates the visual appearance of the app.
    
          if (inCart)
            _shoppingCart.add(product);
          else
            _shoppingCart.remove(product);
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('Shopping List'),
          ),
          body: new ListView(
            padding: new EdgeInsets.symmetric(vertical: 8.0),
            children: widget.products.map((Product product) {
              return new ShoppingListItem(
                product: product,
                inCart: _shoppingCart.contains(product),
                onCartChanged: _handleCartChanged,
              );
            }).toList(),
          ),
        );
      }
    }
    
    void main() {
      runApp(new MaterialApp(
        title: 'Shopping App',
        home: new ShoppingList(
          products: <Product>[
            new Product(name: 'Eggs'),
            new Product(name: 'Flour'),
            new Product(name: 'Chocolate chips'),
          ],
        ),
      ));
    }

    生命周期

    有状态的widget(StatefulWidget)在调用createState之后 => 框架插入新的状态对象插入树中 => 调用initState(子类化state可以重写initState。注意: 需调用super.initState) => 当对象不再需要时,调用dispose (典型实现调用super.dispose)


    Key

    key是用来来控制框架将在widget重建时与哪些其他widget匹配
    默认情况下,框架根据它们的runtimeType和它们的显示顺序来匹配
    使用Key时,框架要求两个widget具有相同的keyruntimeType
    简言之: Key的作用类似于区分每一个widget,在区分的基础上并能提高diff的效率。这一点就和大多数前端框架的最小代价渲染很像了。
    还有一个全局Key,这个是用来标识唯一子widget的。


    你也可以关注我的公众号

    e9beba35cb0f89a9ec5c09e03d463564.png
    展开全文
  • Flutter布局 前言一:接下来一段时间我会陆续更新一些列Flutter文字教程更新进度: 每周至少两篇;更新地点: 首发于公众号,第二天更新于掘金、思否、开发者头条等地方;更多交流: 可以添加我的微信 372623326,...
  • 国庆后面两天在家学习整理了一波flutter,基本把能撸过能看到的代码都过了一遍,此文篇幅较长,建议保存(star)再看。传送门:Nealyang personal blog前言毕竟前端出生,找(qi)到(shi)了(bing)感(mei)觉(ru)后(men),...
  • 2019独角兽企业重金...还有取消边框的 decoration: InputDecoration(border: InputBorder.none,fillColor: Colors.red),   转载于:https://my.oschina.net/u/554046/blog/2982495
  • 前言Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨...
  • 老孟导读:Flutter中有这么一类组件,用于定位、装饰、控制子组件,比如 Container (定位、装饰)、Expanded (扩展)、SizedBox (固定尺寸)、AspectRatio (宽高比)、FractionallySizedBox (占父组件比例)。这些组件的...
  • flutter 虚线边框

    千次阅读 2020-07-08 16:52:59
    使用方式跟BoxDecoration 一致,是...this.dawDashed = true,//是否画虚线,默认为画虚线不画边框 需要注意的是,虚线和边框不能共存,如果不画虚线,dawDashed设为 false。 使用: decoration: const DashedD...
  • Flutter设置圆角边框,Flutter圆角背景

    万次阅读 2019-07-12 18:05:50
    flutter 圆角矩形边框
  • Flutter TextField边框颜色

    千次阅读 2020-02-19 21:33:25
    } 通过修改 enabledBorder 和 focusedBorder 可以调整边框在选中和失焦时的颜色 child: TextField( controller: pwdController, obscureText: true, decoration: InputDecoration( hintText: '请输入验证码', ...
  • border: OutlineInputBorder( borderRadius: BorderRadius.circular(15.0), borderSide: BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid) ...取消边框设置 border: InputBorder.none,
  • flutter 自定义虚线边框

    千次阅读 2020-07-14 23:11:03
    随着时间的推移,学习的东西越多,做的东西也就多了,也会有个别组件,在flutter原生中无法实现,比如本文要讲的虚线边框,在网上找了一圈,有是有的,但还是不能满足我的需求,我是希望可以自定义虚线框,除了虚线...
  • 2 自定义 TextFeild 的下划线样式以及外边框样式 源代码一览,注释中有详细说明 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; ///整理 //TextField 输入文本 decoration ...
  • flutter设置单个边框

    千次阅读 2020-01-19 20:12:44
    以下是单独设置左边框的写法 Container( decoration: BoxDecoration( border: Border( left: BorderSide( width: 0.5,//宽度 color: Colors.red, //边框颜色 ), ), ), ) 四个边框一起设置 ...
  • Flutter 设置input边框

    2019-09-26 04:12:49
    import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Materia...
  • flutter 绘制边框和圆角 BoxDecoration

    万次阅读 2019-04-08 15:39:10
    flutter BoxDecoration源码常用属性如下 const BoxDecoration({ this.color, // 底色 this.image, // 背景图 this.border, // 边框颜色 this.borderRadius, // 圆角大小 this.boxShadow, // 阴影 this....
  • flutter Container 圆角 边框

    万次阅读 2019-12-25 17:45:05
    Container( decoration: new BoxDecoration( border: new Border.all(color: Color(0xFFFF0000), width: 0.5), color: Color(0xFF9E9E9E), borderRadius: new BorderRadius.circular(...
  • Flutter ExpansionPanelList阴影边框去除 事情是这样的,我写一个界面,需要一个下拉框列表,但是不是所有的样式不是一样的,所以我写了一个Column,然后写了两个ExpansionPanelList,一个是List生成的,另一个是...
  • 2 自定义 TextFeild 的下划线样式以及外边框样式 源代码一览,注释中有详细说明 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; ///整理 //TextField 输入文本 decoration ...
  • 使用CupertinoPicker插件的时候发现,选中放大后有两条线框,出于业务需求要把线框去除,但是在CupertinoPicker的源码当中却没有找到对应的属性,也就是CupertinoPicker没有提供删除线框的方法。...
  • Flutter学习笔记 边框

    2019-09-18 12:01:25
    BoxDecoration(装饰器) const BoxDecoration({ this.color, this.image, this.border, this.borderRadius, this.boxShadow, this.gradient, ... this.shape = BoxShape.rectangl...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 213
精华内容 85
关键字:

flutter边框