• [Flutter] 写第一个 Flutter app,part1 要点


    模拟器中调试元素的布局:

      Android Studio 右侧边栏 Flutter Inspector,选择 Toggle Debug Paint 打开。


    格式化代码:

      编辑器中右键 Reformat Code with dartfmt。

    使用外部功能包(https://pub.dartlang.org/flutter):

      把外部包名加到 pubspec.yaml 的 dependencies 依赖中,运行 flutter packages get 安装,代码中 import 进来使用。

    例子内容解读(https://flutter.io/docs/get-started/codelab):

      StatelessWidget 子 Widget 实现 build 方法,Stateless widget 是不变的,意思是它们的属性不能变 - 所有的值都是 final。

      StatefulWidget   子 Widget 实现 createState 方法;Stateful widget 维护着 widget 生命周期内可能改变的状态。

        实现一个 stateful widget 需要至少两个 class:

        1)一个创建了 State 类实例的 StatefulWidget 类。

        2)一个 State 类。

    // 我们使用了一个 RandomWords 的 State 类,RandomWordsState 依赖 RandomWords 类。
    class RandomWordsState extends State<RandomWords> {
        // TODO 实现 build() 方法,返回 Scaffold
        @override
        Widget build(BuildContext context) {
            return Scaffold(
                appBar: AppBar(
                    title: Text('Startup Name Generator'),
                ),
                body: _buildSuggestions(),
            );
        }
    
        // 实现 Scaffold 里使用的私有 widget 功能,比如构建 ListView,ListView 构造方法允许我们构建一个按需加载的 list
        // ListView 提供一个 builder 属性和 itemBuilder 方法,itemBuilder 是一个匿名函数形式的回调方法,传入 BuildContext 和 行索引号。
        Widget _buildSuggestions() {
          return ListView.builder(
             padding: const EdgeInsets.all(16.0),
             itemBuilder: /*1*/ (context, i) {
                if (i.isOdd) return Divider(); /*2*/
    
                final index = i ~/ 2; /*3*/
                if (index >= _suggestions.length) {
                    _suggestions.addAll(generateWordPairs().take(10)); /*4*/
                }
                return _buildRow(_suggestions[index]);
             });
          }
       /*1*/ itemBuilder回调在生成每个单词时调用一次,并替换 ListTile 行。偶数行为单词添加 ListTile,奇数行添加 Divider widget 垂直分隔实体。
       /*2*/ 在 ListView 每行之前添加一个一像素高的 divider
       /*3*/ 表达式 i ~/ 2,i 整除 2,返回整数的结果。如 1,2,3,4,5 变成 0,1,1,2,2。这计算 ListView 中真实的单词数,减去 divider widget 数。
       /*4*/ 如果到达了可用单词的结尾,接着生成 10个到建议列表中。调用 _buildRow 展示每行的 title。
    Widget _buildRow(WordPair pair) {
    return ListTile( title: Text( pair.asPascalCase, style: _biggerFont, ), ); } } // 有状态的类除了创建 State 类的实例,什么都不做。 class RandomWords extends StatefulWidget { @override RandomWordsState createState() => new RandomWordsState(); }

    Flutter Api Doc(https://docs.flutter.io/flutter/index.html):

      ListTile 一个单独的固定高度的行,一般包含有文本和前后图标(https://docs.flutter.io/flutter/material/ListTile-class.html)。

        第一行的 text 不是可选的,由 title 指定。

        subtitle 是可选的,会分配附加一行文本的空间,或者当 isThreeLine 为 true 是两行。

        dense 为 true 时,title 总高 和 DefaultTextStyles 包裹的 title、subtitle 尺寸会缩小。

        ListTile 总是固定的高度(取决于 isThreeLine、dense、subtitle 是如何配置的);根据它们的内容无法增加高度。

        如果你在寻找可以在一行内任意布局的 widget,考虑使用 Row.

        ListTile 一般在 ListViews 中使用,或者 Drawer 和 Card 的 Column 中。

        需要它的一个祖先是 Material widget。

        ListTileTheme,给 ListTiles 定义了视觉属性。

        ListView,可以在一个滚动列表中展示任意数量的 ListTile。

        CircleAvatar,代表一个人的 icon,通常作为 ListTile 的 leading 元素来使用。

        Card,展示少量的带有 Column 的 ListTiles。

        Divider,

        ListTile.divideTitles,

        CheckboxListTile,RadioListTile,SwitchListTile


      Divider 两边带有 padding的一个设备像素厚水平线(https://docs.flutter.io/flutter/material/Divider-class.html)。

        Divider 可以用在 list、Drawer 和其它需要水平/垂直分隔内容的地方。

        在一个列表的 item 中使用一像素 divider,考虑使用 ListTile.divideTiles,是针对这种情况优化的例子。

        盒子高度由 Divider.height 控制,合适的 padding 会在宽高中自动计算。

        PopupMenuDivider,等同 Divider,但是针对弹出菜单。

        ListTile.divideTiles,另一种 list 中的 divide widget 的途径。

    part1:https://flutter.io/docs/get-started/codelab

    LearnMore:https://flutter.dev/docs/get-started/learn-more

    ApiReference:https://docs.flutter.io/

    FlutterPackages:https://pub.dartlang.org/flutter

    Codelabs:https://codelabs.developers.google.com/codelabs/flutter/index.html#3

    Link:https://www.cnblogs.com/farwish/p/10393029.html

  • 相关阅读:
    jQuery EasyUI实现全部关闭tabs
    设计与实现模块管理系统基本功能定义自己(28--所述多个模块之间的关联[4])
    C++11的一些功能
    表和视图之间的区别
    三个思路来实现自己定义404页面
    WebGL 在 OpenGL ES 指令 iOS 在 C 分歧版指令分析
    hdoj 2183 奇数阶魔方(II) 【模拟】+【法】
    新浪、万网前系统架构师高俊峰:统一监控报警平台架构设计思路
    this compilation unit is not on the build path of a java project
    Ecshop wap
  • 原文地址:https://www.cnblogs.com/farwish/p/10393029.html
Copyright © 2020-2023  润新知