天天看點
傳回

【Flutter】滑動效果評價元件

【Flutter】滑動效果評價元件

「Flutter」是Google的UI工具包，可通過一個代碼庫建構漂亮的，本機編譯的移動，Web和桌面應用程式。

在在本部落格中，我們将探讨「Flutter中」 的**Reviews Slider。**我們将看到如何在flutter應用程式中使用「reviews_slider」包來實作帶有生動變化的微笑的示範程式Reviews Slider示範程式。

pub位址：https://pub.dev/packages/reviews_slider

評論滑塊

評論滑塊是一個帶有變化的微笑的動畫小部件，用于收集使用者調查得分。當使用者點選微笑并向左或向右旋轉或向左旋轉時，然後更改微笑形狀。

【Flutter】滑動效果評價元件

該示範視訊示範了如何在flutter中使用評論滑塊。它顯示了使用「Flutter」應用程式中的「reviews_slider」包，評論滑塊将如何工作。當使用者從左到右或從右到左旋轉微笑并更改形狀時，它顯示了一個具有變化的微笑的動畫小部件。它會顯示在您的裝置上。

評論滑塊的一些參數：

  • **onChange：**此參數用于在指針更改滑塊的值并且不再與螢幕接觸時觸發。
  • **options：**此參數用于評論标題，例如好，差，好等。
  • **optionStyle：**此參數用于審閱标題的文本樣式，例如顔色，大小等。
  • **initialValue：**此參數用于滑塊的初始值。預設值init值為2。

使用

添加依賴

reviews_slider: ^1.0.5

複制

引入

import 'package:reviews_slider/reviews_slider.dart';

複制

運作指令：「flutter packages get」

啟用「AndriodX」

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

複制

在libs目錄下建立 「reviews_demo.dart」 檔案

首先，我們将建立一個整數變量。

int selectedValue1;

複制

我們将在void **onChange1（）「方法上添加一個變量。在此方法中，我們将添加」setState（）。**在此setState中，我們将添加等于該值的selectedValue1變量。

void onChange1（int value）{ 
  setState（（）{ 
    selectedValue1 = value; 

  }）; 
}

複制

我們将添加一個列小部件，并且mainAxisAlignment作為中心，并且crossAxisAlignment已啟動。我們将添加一個文本和「ReviewSlider（）。「在ReviewSlider中，我們将添加」optionStyle」表示評論标題的文本樣式，例如顔色，大小等，而「onChange則」意味着隻要指針更改了滑塊的值并且不再與螢幕接觸，就會觸發。另外，我們将添加文本selectedValue1.toString（）。它将顯示在裝置上。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text(
      'How was the service you received?',
      style: TextStyle(color: Colors.black,
          fontSize: 18),
    ),
    SizedBox(height: 20),
    ReviewSlider(
      optionStyle: TextStyle(
        color: Colors.red,
        fontWeight: FontWeight.bold,
      ),
      onChange: onChange1,
    ),
    Text(selectedValue1.toString(),style: TextStyle(color: Colors.red),
   ),
  ],
),

複制

【Flutter】滑動效果評價元件

img

現在，我們将添加多個具有不同顔色的文本樣式的滑塊。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text(
      'How was the service you received?',
      style: TextStyle(color: Colors.black,
          fontSize: 18),
    ),
    SizedBox(height: 20),
    ReviewSlider(
      optionStyle: TextStyle(
        color: Colors.red,
        fontWeight: FontWeight.bold,
      ),
      onChange: onChange1,
    ),
    Text(selectedValue1.toString(),style: TextStyle(color: Colors.red),),
    SizedBox(height: 20),
    Text(
      'Quality of our product?',
      style: TextStyle(color: Colors.black, fontSize: 18),
    ),
    SizedBox(height: 20),
    ReviewSlider(
      optionStyle: TextStyle(
        color: Colors.orange,
        fontWeight: FontWeight.bold,
      ),
      onChange: onChange2,
      initialValue: 1,
    ),
    Text(selectedValue2.toString(),style: TextStyle(color: Colors.orange)),
    SizedBox(height: 20),
    Text(
      'Price of our product?',
      style: TextStyle(color: Colors.black, fontSize: 18),
    ),
    SizedBox(height: 20),
    ReviewSlider(
      optionStyle: TextStyle(
        color: Colors.black,
        fontWeight: FontWeight.bold,
      ),
      onChange: onChange3,
      initialValue: 3,
    ),
    Text(selectedValue3.toString(),style: TextStyle(color: Colors.black)),
  ],
),

複制

我們将添加三個帶有不同文本顔色，不同的initialValue和不同标題的評論滑塊。當我們運作應用程式時，我們應該獲得螢幕的輸出，如螢幕下方的截圖所示。

【Flutter】滑動效果評價元件

完整實作 

import 'package:flutter/material.dart';
import 'package:reviews_slider/reviews_slider.dart';


class ReviewsDemo extends StatefulWidget {
  @override
  _ReviewsDemoState createState() => _ReviewsDemoState();
}

class _ReviewsDemoState extends State<ReviewsDemo> {
  int selectedValue1;
  int selectedValue2;
  int selectedValue3;

  void onChange1(int value) {
    setState(() {
      selectedValue1 = value;

    });
  }

  void onChange2(int value) {
    setState(() {
      selectedValue2 = value;
    });
  }
  void onChange3(int value) {
    setState(() {
      selectedValue3 = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[50],
      appBar: AppBar(
        backgroundColor: Colors.cyan,
        title: Text("Flutter Reviews Slider Demo"),
        automaticallyImplyLeading: false,
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.only(left:18.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'How was the service you received?',
                style: TextStyle(color: Colors.black,
                    fontSize: 18),
              ),
              SizedBox(height: 20),
              ReviewSlider(
                optionStyle: TextStyle(
                  color: Colors.red,
                  fontWeight: FontWeight.bold,
                ),
                onChange: onChange1,
              ),
              Text(selectedValue1.toString(),style: TextStyle(color: Colors.red),),
              SizedBox(height: 20),
              Text(
                'Quality of our product?',
                style: TextStyle(color: Colors.black, fontSize: 18),
              ),
              SizedBox(height: 20),
              ReviewSlider(
                optionStyle: TextStyle(
                  color: Colors.orange,
                  fontWeight: FontWeight.bold,
                ),
                onChange: onChange2,
                initialValue: 1,
              ),
              Text(selectedValue2.toString(),style: TextStyle(color: Colors.orange)),
              SizedBox(height: 20),
              Text(
                'Price of our product?',
                style: TextStyle(color: Colors.black, fontSize: 18),
              ),
              SizedBox(height: 20),
              ReviewSlider(
                optionStyle: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
                onChange: onChange3,
                initialValue: 3,
              ),
              Text(selectedValue3.toString(),style: TextStyle(color: Colors.black)),
            ],
          ),
        ),
      ),
    );
  }
}

複制

原文連結：https://medium.com/flutterdevs/review-slider-in-flutter-d0b04046b4eb

上一篇: 【Flutter】評級對話框元件
下一篇: Shiro使用自己的SessionId管理和rememberMe配置