Flutter 影片1-有解無憂

寫代碼就希望寫出來的東西是可以動的，所以，最近分享一點影片的代碼一起學習呀~

覺得有用的話，記得收藏一波~

以下所有的代碼，可以直接復制進去main.dart檔案里面，就可以運行出這個效果啦~

（一）效果圖
這個效果是當你一開始運行，這個小方塊就會開始從左上角沿著對角線運動到右下角
在這里插入圖片描述

（一）代碼

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("demo"),
      ),
      body: AnimateDemo(),
    ));
  }
}

class AnimateDemo extends StatefulWidget {
  @override
  _AnimateDemoState createState() => _AnimateDemoState();
}

class _AnimateDemoState extends State<AnimateDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;//初始化
  Animation _animation;
  
  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation = Tween<AlignmentGeometry>(
            begin: Alignment.topLeft, end: Alignment.bottomRight)//影片運動的始末軌跡
        .animate(_animationController);
        
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
            width: 200,
            height: 200,
            color: Colors.orange,
            child: AlignTransition(
                alignment: _animation,//呼叫的函式
                child: Container(
                  width: 30,
                  height: 30,
                  color: Colors.green,
      ))));
  }
}

（二）效果圖
該效果是點擊圖示，再開始沿著運動軌跡運動
在這里插入圖片描述
（二）代碼

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("甜寵軟妹"),
      ),
      body: AlignDemo(),
    ));
  }
}

class AlignDemo extends StatefulWidget {
  @override
  _AlignDemoState createState() => _AlignDemoState();
}

class _AlignDemoState extends State<AlignDemo> {
  var _aligmment = Alignment.topLeft;//初始化

  @override
  Widget build(BuildContext context) {
    return Align(
      child: Container(
        width: 200,
        height: 200,
        color: Colors.orange,
        child: AnimatedAlign(
          alignment: _aligmment,
          duration: Duration(seconds: 2),
          child: IconButton(
              icon: Icon(
                Icons.car_repair,
                color: Colors.white,
                size: 30,
              ),
              onPressed: () {
                setState(() {
                  _aligmment = Alignment.bottomRight;//給突變系結事件
                });
              }),
        ),
      ),
    );
  }
}

總結：
效果1 是通過給container外層加一個AlignTransition，在初始化函式里面呼叫影片函式

效果2 是直接給圖示系結事件，在影片組件里面呼叫函式即可實作

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/246605.html

標籤：區塊鏈

上一篇：C語言·XDOJ練習·股票計算

下一篇：Filecoin今日行情分析