Flutterによるマルチキャストの実現banner

10075 ワード
Futter
効果図を先に表示:
flutterのSwiperコントロール、ワイヤレスマルチキャストを実現する:
1.準備
まずpubspecを開く.yamlファイル、コントロール依存性の追加
flutter_swiper: ^1.0.6    //  pub

実行コマンド:flutter packages get
2.使用
完全なdartコード
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:fluttertoast/fluttertoast.dart';

final List images = [
  'images/viewpage_ima1.jpg',
  'images/viewpage_ima2.jpg',
  'images/viewpage_ima3.jpeg',
  'images/viewpage_ima4.jpg',
  'images/icon_bg.jpg',
];

final List descriptions = [
  ' ，      ',
  '     ，     ',
  '     ，     ',
  '      ',
  '       ',
];
class MySwiperPage extends StatefulWidget {
  @override
  SwiperPageState createState() {
    return SwiperPageState();
  }
}
class SwiperPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('    '),
      ),
      body: Column(
        children: [
          Container(
              width: MediaQuery.of(context).size.width,
              margin: const EdgeInsets.only(bottom: 10.0),
              height: 180.0,
              child: Swiper(
                itemBuilder: _swiperBuilder,
                itemCount: images.length,

                pagination: new SwiperPagination(
                    builder: DotSwiperPaginationBuilder(
                      color: Colors.black38,
                      activeColor: Colors.blueAccent,
                    )),
                control: null,
                duration: 300,
//                viewportFraction: 0.9,
                scrollDirection: Axis.horizontal,
                autoplay: true,
                onTap: (int index){
                  Fluttertoast.showToast(msg: '    $index ');
                },
              )),
          Center(
              child: SizedBox.fromSize(
                size: Size.fromHeight(180.0),
                child: Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return Padding(
                      padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 0.0),
                      child: GestureDetector(
                        onTap: () {
                          Fluttertoast.showToast(msg: descriptions[index]);
                        },
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(6.0),
                          child: Stack(
                            fit: StackFit.expand,
                            children: [
                              Image.asset(images[index], fit: BoxFit.cover),
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                  itemCount: images.length,
                  //       
                  pagination: new SwiperPagination(
                      builder: DotSwiperPaginationBuilder(
                        color: Colors.black38,
                        activeColor: Colors.white,
                      ),
                      margin: const EdgeInsets.only(bottom: 22.0)),
                  control: null,
                  duration: 300,
                  scrollDirection: Axis.horizontal,
                  viewportFraction: 0.8,
                  scale: 0.85,
                  autoplay: true,
                  onTap: (int index) {
                    Fluttertoast.showToast(msg: '    $index ');
                  },
                ),
              )),
          Center(
              child: SizedBox.fromSize(
                size: Size.fromHeight(180.0),
                child: Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return Padding(
                      padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 15.0),
                      child: GestureDetector(
                        onTap: () {
                          Fluttertoast.showToast(msg: descriptions[index]);
                        },
                        child: ClipRRect(
//                      elevation: 5.0,
                          borderRadius: BorderRadius.circular(6.0),
                          child: Stack(
                            fit: StackFit.expand,
                            children: [
                              Image.asset(images[index], fit: BoxFit.cover),
//                      decorationBox,
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                  itemCount: images.length,
                  //       
                  pagination: new SwiperPagination(
                      builder: DotSwiperPaginationBuilder(
                        color: Colors.black38,
                        activeColor: Colors.white,
                      ),
                      margin: const EdgeInsets.only(bottom: 22.0)),
                  control: null,
                  duration: 300,
                  scrollDirection: Axis.horizontal,
                  viewportFraction: 0.95,
                  autoplay: true,
                  onTap: (int index) {
                    Fluttertoast.showToast(msg: '    $index ');
                  },
                ),
              ))
        ],
      )
    );
  }

  Widget _swiperBuilder(BuildContext context, int index) {
    return (Image.asset(
      images[index],
      fit: BoxFit.fill,
    ));
  }

  void _goOtherApp(int index) async {
    const url = 'https://www.baidu.com'; //  url   scheme host    ：scheme://host
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Could not launch $url';
    }
  }
}

上のコードにはtoastが使われているので、toastの依存を追加する必要があります.画像をクリックするとH 5ページをジャンプする必要がある場合はurlを追加する必要があります.Launcher依存,方法はswiperと類似しpubspec.yamlファイルに追加
fluttertoast: ^2.2.11
flutter_swiper: ^1.0.6
url_launcher: ^5.0.3

Swiper基本パラメータ
パラメータ
デフォルト
説明
scrollDirection
Axis.horizontal
スクロール方向、Axisに設定.vertical垂直スクロールが必要な場合
loop
true
ワイヤレスマルチキャストモードスイッチ
index
0
初期時の下付き位置
autoplay
false
自動再生スイッチ
autoplayDely
3000
自動再生遅延ミリ秒数
autoplayDiableOnInteraction
true
ユーザがドラッグすると、自動再生を停止するかどうか.
onIndexChanged
void onIndexChanged(int index)
ユーザが手動でドラッグしたり、自動的に再生したりして下付き文字が変更された場合に呼び出されます.
onTap
void onTap(int index)
ユーザーがローテーションをクリックすると呼び出されます
duration
300.0
アニメーション時間(ミリ秒単位)
pagination
null new SwiperPagination()を設定してデフォルトのページングインジケータを表示
control
null new SwiperControl()のデフォルトページングボタンの設定
 
 
 
 
 
 
 
 
 
 
 
ページングインジケーターpagination
すなわちbannerの下の小さな円点は,bannerの輪播に伴ってスライドする
パラメータ
デフォルト
説明
alignment
Alignment.bottomCenter
ページングインジケータを別の場所に配置する場合は、このパラメータを変更できます.
margin
const EdgeInsets.all(10.0)
ページングインジケータとコンテナの枠線の距離
builder
SwiperPagination.dots
現在、2つのデフォルトのページングインジケータスタイルが定義されている:SwiperPagination.dots、SwiperPagination.fraction、いずれもさらなるカスタマイズが可能である.
 
 
 
 
 
 
シンプルなカスタマイズ
pagination: new SwiperPagination(
    builder: DotSwiperPaginationBuilder(
       color: Colors.black38,
       activeColor: Colors.white,
    ),
    margin: const EdgeInsets.only(bottom: 22.0))

完全カスタムインジケータ
new Swiper(
    ...,
    pagination:new SwiperCustomPagination(
        builder:(BuildContext context, SwiperPluginConfig config){
            return new YourOwnPagination();
        }
    )
);

コントロールボタンコントロール
Swiperのコントロール属性、すなわちbannerの左右のボタンであり、SwiperPluginから継承され、new SwiperControl()を設定してデフォルトの制御ボタンを表示する
ボタンを制御したくない場合は、swiperのcontrolプロパティをnullに設定します.
パラメータ
デフォルト
説明
iconPrevious
Icons.arrow_back_ios
前ページのIconData
iconNext
Icons.arrow_forward_ios
次ページのIconData
color
Theme.of(context).primaryColor
コントロールボタンの色
size
30.0
コントロールボタンのサイズ
padding
const EdgeInsets.all(5.0)
コントロールボタンとコンテナの距離
 
 
 
 
 
 
 
コントローラ(SwiperController)SwiperControllerは、Swiperのindexの属性を制御、自動再生を停止、開始するためのものである.new SwiperController()でSwiperControllerインスタンスを作成し、将来使用できるように保存します.
方法
説明
void move(int index, {bool animation: true})
指定した下付き文字に移動し、アニメーションを再生するかどうかを設定します.
void next({bool animation: true})
次のページ
void previous({bool animation: true})
前のページ
void startAutoplay()
自動再生を開始
void stopAutoplay()
自動再生を停止
 
 
 
 
 
 
Swiperのlayoutプロパティ、レイアウト
1.SwiperLayout.STACK

注意:Swiperのlayoutプロパティを使用する場合は、itemWidthプロパティが必要です.そうしないと、エラーが発生します.
2番目のbannerに2つのコードを追加します.
itemWidth: 300.0,
layout: SwiperLayout.STACK,

2.SwiperLayout.CUSTOM
元の3番目のbannerに以下のコードを追加
layout: SwiperLayout.CUSTOM,
customLayoutOption: new CustomLayoutOption(
          startIndex: -1, stateCount: 3)
      .addRotate([-45.0 / 180, 0.0, 45.0 / 180]).addTranslate([
   new Offset(-370.0, -40.0),
   new Offset(0.0, 0.0),
   new Offset(370.0, -40.0)
]),
itemWidth: 300.0,
itemHeight: 300.0,

3.layout: SwiperLayout.TINDER
元の2番目のbannerに次のコードを追加して変更します.itemWidthとitemHeightは設定しなければなりません.そうしないと、エラーが発生します.
size: Size.fromHeight(280.0),//     ，     
//      
itemWidth: 350.0,
itemHeight: 250.0,//      
layout: SwiperLayout.TINDER
PowerAutomateは最高だ
[Power Automate]設定すると自動的に(Apply to each)に格納されてしまう動的なコンテンツを変数として使う方法