Flutter 小部件的使用

flutter 中的小部件的使用

查看 Flutter 官方文檔，給自己加深印象

flutter 小部件簡(jiǎn)介

flutter 中的小部件不同于Android中的View ，小部件具有不同生命周期?。。。ㄔ贏ndroid中，view生命周期是直到結(jié)束）它們也是不可變了。因?yàn)槊看胃淖?，都是?chuàng)建新的小部件實(shí)例。相比之下，Android都是通過(guò)setXXX 去改變舊的屬性。

它是極其輕巧的。因?yàn)樗回?fù)責(zé)描述，而不是去繪制實(shí)際視圖

flutter 小部件的使用

通過(guò)查看部分文檔，發(fā)現(xiàn)它的使用與 Vue 有點(diǎn)相似???

可變的小部件和不可變小部件

可變的小部件指的是，可以改變小部件中的文字等信息。不可變指的是不需要改變文字，布爾值等信息的小部件。例如 Activity 的Title 就不需要改變

在 Flutter 中，使用 StatelessWidget 來(lái)描述不可變窗口，使用 StatefulWidget 描述可變窗口，例如：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return MaterialApp(
      title: 'this is my first flutter app',
      home: RandomWords(),
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
    );
  }
}

這個(gè)小部件中， title 是不可變的


class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  // add icon and list
  final _saved = new Set<WordPair>();

  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
//    return Text(wordPair.asPascalCase);
    return Scaffold(
      appBar: AppBar(
        title: Text('startup name generator'),
      ),
      body: _buildSuggestions(),
    );
  }

  Widget _buildSuggestions() {
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        if (i.isOdd) return Divider();
        final index = i ~/ 2;
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      },
    );
  }

  Widget _buildRow(WordPair pair) {
    final bool alreadySaved = _saved.contains(pair);
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },
    );
  }
}

在這個(gè)小部件中，列表選中狀態(tài)就是可變的，通過(guò) onTap 點(diǎn)擊事件，調(diào)用 setState 往 list 中 移除或者添加 pair ，這樣，就會(huì)引起界面的重繪

小部件的添加和刪除

在 flutter 中，不能和Android 一樣，在代碼中使用 removeChild 或者 addChild ，它只能在 State 小部件中，通過(guò)setState 方法，然后通過(guò)判斷，來(lái)動(dòng)態(tài)的創(chuàng)建或移除小部件

import 'package:flutter/material.dart';

void main() => runApp(SampleApp());



class SampleApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  SampleAppPage({Key key}) : super(key: key);

  @override
  _SampleAppPageState createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default value for toggle
  bool toggle = true;
  void _toggle() {
    setState(() {
      toggle = !toggle;
    });
  }

  _getToggleChild() {
    if (toggle) {
      return Text('Toggle One');
    } else {
      return MaterialButton(onPressed: () {}, child: Text('Toggle Two'));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Sample App"),
      ),
      body: Center(
        child: _getToggleChild(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Update Text',
        child: Icon(Icons.update),
      ),
    );
  }
}

給我的感覺是更像 Vue 了......

flutter 中如何使用窗口動(dòng)畫

在Android中，窗口動(dòng)畫一般自定義 xml 文件，然后在布局文件中引用，或者代碼使用 alpha 定義顏色，使用 state 切換。

在 Flutter 中，使用控制器 AnimationController 控制動(dòng)畫的執(zhí)行，可以交由其他 小部件進(jìn)行動(dòng)畫的計(jì)算。如：CurvedAnimation

import 'package:flutter/material.dart';

void main() {
  runApp(FadeAppTest());
}

class FadeAppTest extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fade Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyFadeTest(title: 'Fade Demo'),
    );
  }
}

class MyFadeTest extends StatefulWidget {
  MyFadeTest({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyFadeTest createState() => _MyFadeTest();
}

class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
  AnimationController controller;
  CurvedAnimation curve;

  @override
  void initState() {
    controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: Container(
              child: FadeTransition(
                  opacity: curve,
                  child: FlutterLogo(
                    size: 100.0,
                  )))),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Fade',
        child: Icon(Icons.brush),
        onPressed: () {
          controller.forward();
        },
      ),
    );
  }
}

Flutter 中使用畫布

在Android中，需要自定義文字顯示，或者其它圖像的時(shí)候，需要自定義 Canvas ，使用draw 繪制，在Flutter中，提供了最簡(jiǎn)單的畫圖示例：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: DemoApp()));

class DemoApp extends StatelessWidget {
  Widget build(BuildContext context) => Scaffold(body: Signature());
}

class Signature extends StatefulWidget {
  SignatureState createState() => SignatureState();
}

class SignatureState extends State<Signature> {
  List<Offset> _points = <Offset>[];
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          RenderBox referenceBox = context.findRenderObject();
          Offset localPosition =
          referenceBox.globalToLocal(details.globalPosition);
          _points = List.from(_points)..add(localPosition);
        });
      },
      onPanEnd: (DragEndDetails details) => _points.add(null),
      child: CustomPaint(painter: SignaturePainter(_points), size: Size.infinite),
    );
  }
}

class SignaturePainter extends CustomPainter {
  SignaturePainter(this.points);
  final List<Offset> points;
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5.0;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null)
        canvas.drawLine(points[i], points[i + 1], paint);
    }
  }
  bool shouldRepaint(SignaturePainter other) => other.points != points;
}

返回一個(gè) GestureDetector 小部件，在 onPanUpdate 中記錄每次途徑的路徑，使用 setState 更新界面。

如何自定義View

在Android中，如果需要自定義控件，可以定義子類，然后覆寫父類的方法，例如，如果要在 ImageView 的圖片上覆蓋蒙版，可以自定義類，然后覆寫 setImageBitmap方法，在bitmap上添加蒙版。但是在flutter中，推薦使用各種小部件的方式組合成一個(gè)真正需要的小部件

如果需要自定義一個(gè)按鈕，則可以編寫CustomButtom

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: DemoApp()));

class DemoApp extends StatelessWidget {
//  Widget build(BuildContext context) => Scaffold(body: Signature());
    Widget build(BuildContext context){
      return Center(
        child:CustomButton("buttom")
      );
    }
}


class CustomButton extends StatelessWidget {
  final String label;

  CustomButton(this.label);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(onPressed: () {}, child: Text(label));
  }
}

然后使RaisedButtom成為其子類

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.面向?qū)ο笈c面向過(guò)程的區(qū)別 面向過(guò)程：優(yōu)點(diǎn):比面向過(guò)程性能好，因?yàn)槊嫦驅(qū)ο笳{(diào)用類的時(shí)候需要實(shí)例化，比較消耗資源，...
    惜小八閱讀 288評(píng)論 0贊 0
  • 微信小程序案例最全整理 本文整理了微信小程序開發(fā)當(dāng)中的一些開源Demo，供開發(fā)者學(xué)習(xí)研究，適合入門以及初學(xué)開發(fā)者 ...
    janeeyer111閱讀 231評(píng)論 0贊 2
  • 8.4 screen對(duì)象 Javascript中有幾個(gè)對(duì)象在變成重用處不大，而screen對(duì)象就是其中之一。scr...
    kathyever閱讀 295評(píng)論 0贊 0
  • 這次做的是用單片機(jī)控制數(shù)碼管顯示學(xué)號(hào)，比用純數(shù)字電路簡(jiǎn)單方便了許多。相信會(huì)有更多的人能夠順利完成。 數(shù)碼管的介紹：...
    keep1234quiet閱讀 3,827評(píng)論 0贊 0
  • 【如何快速準(zhǔn)確的做好一件事，這是一篇關(guān)于關(guān)于招聘的日志】 正在做劇本的前期策劃工作，劇本已經(jīng)改完，場(chǎng)景也已經(jīng)分門別...
    我拍電影文化傳媒閱讀 701評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容