Flutter 萌新高頻問題(加班猿媽媽叫你回家吃飯了）

時間 2019-11-05

標籤 flutter 高頻問題加班媽媽回家吃飯简体版

原文原文鏈接

想寫這個好久了，每一個人都是從萌新來的，在一些國內Flutter羣裏(482462250,422833104)呆着, 常常有不少重複的問題在羣裏反覆出現，致使羣裏大佬都不愛搭理了。下面的目錄會不斷更新，若是內容太多，我會拆分掉。html

FlutterCandies QQ羣:181398081 android

咱們的組織OpenFlutter,海量插件萌新必備庫git

我是誰，我從哪裏來，我要作什麼

Flutter跟其餘混合開發模式比怎麼樣？

安卓IOS原生是否是滅亡了？

有沒有線上的Flutter產品？

這應該是每一個程序猿選擇新的領域的一種焦慮吧，其實咱們能夠根據本身的狀況，以及該領域的發展前景來進行本身的判斷。答案確定不是惟一的。在塞班滅亡以前，沒人能夠那麼確定它就這樣亡了。一個程序猿固然也不可能一生只是接觸一個技術一個領域，學習難道不是做爲程序猿來講的一種樂趣嗎。對於前2個問題，我無法說出標準答案，第三個，有，鹹魚，愛奇藝，東方財富都在原生的基礎上嵌入了Flutter。

萌新入門看啥

Google官方的widget介紹，有中文字幕

Flutter官網

Dart官網

萌新的本身解決問題的能力

每一個人都從萌新而來，若是你想開森的寫代碼，本身解決問題是必須的

英語是很重要的。
Google和SO能解決你大部分的問題
問問題的時候，儘可能上代碼，或者說明你的意圖，由於可能你的想法或者解決方向就是錯誤的

狀態欄怎麼透明

仍是原生大法好，已經有插件支持，安心食用 flutter_statusbarcolor

怎麼去掉列表上拉或者下拉時候的波紋

glow_notification_widget

該組件在插件loading_more_list當中

下拉刷新

掘金-下拉刷新

上拉加載更多

掘金-上拉加載更多

NestedScrollView的使用

官方的NestedScrollView是有一些缺陷的，在使用這個組件以前，強烈建議食用，裏面的Demo也有NestedScrollView的用法。

掘金-NestedScrollView

個人列表怎麼了

列表或者說ScrollView其實有一個可視區域的概念(Viewport)，就是滾動時候的可見的部分，這個區域的大小每每須要你本身告訴他。

列表放在Column裏面

錯誤示例

child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '測試',
            ),
            ListView.builder(itemBuilder: (context,index){})
          ],
        ),
複製代碼

你想在列表上面加個Text,固然多是別的。你把2個組件放到了Column裏面，可是注意，Column裏面的元素，默認是自動大小的，就autosize.這就會形成ListView認爲外面的區域是無限大的，它會構建出所有的Items，超出的部分會被截掉，列表也會失去滾動的效果。

正確示例

child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '測試',
            ),
            Expanded(
              child: ListView.builder(itemBuilder: (context, index) {}),
            )
          ],
        ),
複製代碼

將列表放進一個Expanded，表示列表的可視區域是除去Text以後的剩下的區域，這樣列表就有了它肯定的可視區域

List裏面能夠放List嗎？

大部分人有這種想法。實際上是想水平和垂直區域都要有對應的滾動。

代碼示例

CustomScrollView(
        slivers: <Widget>[
          //水平
          SliverToBoxAdapter(
            child: Container(
              height: 40.0,
              child: ListView.builder(
                itemBuilder: (context, index) {
                  return Text("測試${index}");
                },
                itemCount: 50,
                scrollDirection: Axis.horizontal,
              ),
            ),
          ),
          //垂直
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return Text("測試${index}");
            }, childCount: 50),
          )
        ],
      ),
複製代碼

注意你要給水平的列表增長指定的高度，由於對於垂直方向來講。。這個水平列表若是沒有固定高度，那麼垂直方法的viewport將無法進行計算

使用ListView仍是SliverList？

這2者的區別在於 1.SliverList必須放在Sliver系列裏面，常見的是CustomScrollView，NestedScrollView的header裏面。請緊緊記住，Sliver系列只能放Sliver系列，別直接把其餘widget好比Container/ListView直接放裏面。 2.ListView內部其實也是包裹了ScrollView，而SliverList依靠的是外部的CustomScrollView或者NestedScrollView的header 裏面的ScrollView 來進行控制的。

這裏咱們提一下經常使用的Sliver組件

CustomScrollView

是Sliver組件的老祖宗，所有的Sliver都放在這個裏面。

SliverList, which is a sliver that displays linear list of children.

SliverFixedExtentList, which is a more efficient sliver that displays linear list of children that have the same extent along the scroll axis. 比SliverList多一個就是相同的行高。這樣性能會更好

SliverGrid, which is a sliver that displays a 2D array of children. 能夠設置每行的個數的Grid

SliverPersistentHeader A sliver whose size varies when the sliver is scrolled to the leading edge of the viewport. This is the layout primitive that SliverAppBar uses for its shrinking/growing effect.

很是好用的組件，SliverAppBar就是用這個實現的。這個組件的特色是能夠建立出隨着滑動變化的能夠Pinned的元素，你們常常用的什麼吸頂組件能夠用這個很方便的構建

SliverToBoxAdapter 當你想把一個非Sliver的Widget放在CustomScrollview裏面的時候，你須要用這個包裹一下。千萬別把非Sliver widget直接放在Sliver裏面，記得用這個

SliverFillRemaining sizes its child to fill the viewport in the cross axis and to fill the remaining space in the viewport in the main axis. 使用這個它會填充完剩餘viewport裏面的所有空間

SliverPadding, which is a sliver that adds blank space around another sliver. 你能夠把不是Sliver系列的widget放這個裏面，跟SliverToBoxAdapter效果差很少，其實你也能夠用SliverToBoxAdapter 裏面放個Padding來實現

SliverAppBar, which is a sliver that displays a header that can expand and float as the scroll view scrolls.

SliverSafeArea A sliver that insets another sliver by sufficient padding to avoid intrusions by the operating system. For example, this will indent the sliver by enough to avoid the status bar at the top of the screen.爲了防止各類邊界的越界，好比說越過頂部的狀態欄，跟SafeArea效果同樣。只是這個是放Sliver裏面的

除了Sliver列表以外，SliverToBoxAdapter，SliverFillRemaining是Sliver系列裏面高頻使用的組件。

圓角

ClipRRect(
        borderRadius: new BorderRadius.circular(radius),child:child)
複製代碼

點擊水波紋

return InkWell(
                    child: Text("測試${index}"),
                    onTap: () {},
                  );
複製代碼

點擊空白透明區域沒事件響應

return GestureDetector(
                    behavior: HitTestBehavior.translucent,
                    child: Text("測試${index}"),
                    onTap: () {},
                  );
複製代碼

設置HitTestBehavior

enum HitTestBehavior {
  /// Targets that defer to their children receive events within their bounds
  /// only if one of their children is hit by the hit test.
  deferToChild, //只生效在child的區域好比文字

  /// Opaque targets can be hit by hit tests, causing them to both receive
  /// events within their bounds and prevent targets visually behind them from
  /// also receiving events.
  opaque,//GestureDetector的整個區域，不包括它下面的區域

  /// Translucent targets both receive events within their bounds and permit
  /// targets visually behind them to also receive events.
  translucent,// GestureDetector的整個區域以及它下面的區域
}
複製代碼

Flutter錯誤提示

Flutter中若是有錯誤，將會在控制檯當中顯示出錯誤信息(雖然有時候信息不能反映出準確的位置)，你能夠根據這個信息來了解錯誤的緣由和地方

I/flutter ( 9746): The following assertion was thrown building NotificationListener<ScrollNotification>: I/flutter ( 9746): A RenderViewport expected a child of type RenderSliver but received a child of type I/flutter ( 9746): RenderRepaintBoundary. I/flutter ( 9746): RenderObjects expect specific types of children because they coordinate with their children during I/flutter ( 9746): layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a I/flutter ( 9746): RenderSliver does not understand the RenderBox layout protocol.

E/flutter ( 9746): #6 runApp (package:flutter/src/widgets/binding.dart:756:7) E/flutter ( 9746): #7 main (package:flutter_app123123213/main.dart:3:16)

上面錯誤是我嘗試將ListView(非Sliver組件)放進CustomScrollView中，上面是錯誤信息，下面的是錯誤發生在我寫的代碼的哪裏。

這個東西沒別的方法，多被坑幾回就會好了。。

鍵盤擋住頁面了

請使用一些能滾動的組件包住你的頁面。好比SingleChildScrolView，

Appbar/Tabbar/StatusBar的高度

Appbar kToolbarHeight 這個是一個系統的Const能夠直接得到

Tabbar 能夠用tabbar.preferredSize獲取若是你看源碼。其實它也仍是一個Const 多看源碼吧。。

StatusBar

final double statusBarHeight = MediaQuery.of(context).padding.top;
複製代碼

處理安卓/IOS系統中文本縮放對Flutter文字的影響以及根據App的文字大小設置某個頁面的文字大小

獲取MediaQuery而且對它的textScaleFactor進行重定義下面是實現

import 'dart:math' as math;

import 'package:flutter/material.dart';

class NoScaleTextWidget extends StatelessWidget {
  final Widget child;

  const NoScaleTextWidget({
    Key key,
    @required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaxScaleTextWidget(
      max: 1.0,
      child: child,
    );
  }
}

class MaxScaleTextWidget extends StatelessWidget {
  final double max;
  final Widget child;

  const MaxScaleTextWidget({
    Key key,
    this.max = 1.2,
    @required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var data = MediaQuery.of(context);
    var scale = math.min(max, data.textScaleFactor);
    return MediaQuery(
      data: data.copyWith(textScaleFactor: scale),
      child: child,
    );
  }
}

class ScaleTextWidget extends StatelessWidget {
  final double scale;

  final Widget child;

  const ScaleTextWidget({
    Key key,
    @required this.scale,
    @required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var data = MediaQuery.of(context);
    var scale = this.scale ?? data.textScaleFactor;
    return MediaQuery(
      data: data.copyWith(textScaleFactor: scale),
      child: child,
    );
  }
}
複製代碼

使用方式以下，固然你也使用這個來實現對某個頁面字體大小縮放的功能（好比app裏面的有調整字體大小）

return MaterialApp(
    builder: (c, w) {
      //不該用系統的字體縮放
      return NoScaleTextWidget(
        child: w,
      );
    },
    home: child,
  );
複製代碼