betacode

Руководство Flutter LinearProgressIndicator

View more Tutorials:

1- LinearProgressIndicator

LinearProgressIndicator - это подкласс ProgressIndicator, который создает горизонтальный индикатора прогресса (progress bar indicator), но вы также можете создать вертикальный индикатор прогресса, если поместите его в RotatedBox, вращающийся на 90 градусов.
  • TODO Link!
LinearProgressIndicator делится на два типа:

Determinate

Determinate (определенный): это индикатор прогресса, который показывает пользователю процент выполненной работы на основе значения свойства value (значение в диапазоне от 0 до 1).

Indeterminate

Indeterminate (неопределенный): это индикатор прогресса, который не определяет процент выполненной работы и не указывает время окончания.
LinearProgressIndicator Constructor:
LinearProgressIndicator constructor
const LinearProgressIndicator(
    {Key key,
    double value,
    Color backgroundColor,
    Animation<Color> valueColor,
    double minHeight,
    String semanticsLabel,
    String semanticsValue}  
)

2- Example: Indeterminate

Начнем с простейшего примера: LinearProgressIndicator имитирует процесс, который активен, но не указывает процент выполнения и время окончания работы.
main.dart (ex 1)
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter LinearProgressIndicator Example'),
      ),
      body: Center(
        child:  LinearProgressIndicator(
          backgroundColor: Colors.cyan[100],
          valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
        ),
      ),
    );
  }
}
По умолчанию LinearProgressIndicator имеет довольно небольшой размер, но если вы хотите изменить его размер, давайте поместим его в​​​​​​​ SizedBox.
SizedBox(
  width: 250,
  height: 20,
  child: LinearProgressIndicator(
    backgroundColor: Colors.cyan[100],
    valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
  ),
)
Параметр valueColor используется для задания цветовой анимации хода выполнения (progress) для LinearProgressIndicator, например:
valueColor: new AlwaysStoppedAnimation<Color>(Colors.red)
AlwaysStoppedAnimation<Color> всегда останавливает анимацию LinearProgressIndicator , если параметр value является конкретным значением, а не null.
SizedBox(
  width: 250,
  height: 20,
  child: LinearProgressIndicator(
    value: 0.3,
    backgroundColor: Colors.cyan[100],
    valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
  ),
)
Основываясь на вышеупомянутых особенностях параметров value и valueColor, вы можете управлять поведением LinearProgressIndicator. Давайте рассмотрим пример:
main.dart (ex 1d)
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {

  bool _working = false;

  void startWorking() async {
    this.setState(() {
      this._working = true;
    });
  }

  void finishWorking() {
    this.setState(() {
      this._working = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter LinearProgressIndicator Example'),
      ),
      body: Center(
          child:  Column (
              mainAxisAlignment: MainAxisAlignment.center,
              children:  [
                SizedBox(
                  width: 250,
                  height: 20,
                  child: LinearProgressIndicator(
                    value: this._working? null: 1,
                    backgroundColor: Colors.cyan[100],
                    valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
                  ),
                ),
                SizedBox(width:10, height:10),
                ElevatedButton(
                    child: Text("Start"),
                    onPressed: this._working? null: () {
                      this.startWorking();
                    }
                ),
                ElevatedButton(
                    child: Text("Finish"),
                    onPressed: !this._working? null: () {
                      this.finishWorking();
                    }
                )
              ]
          )
      ),
    );
  }
}

3- Example: Determinate

В следующем примере LinearProgressIndicator используется для для отображения прогресса с информацией о проценте выполненной работы. Параметр value имеет значение от 0 до 1.
main.dart (ex 2)
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> {

  double _value = 0;
  bool _working = false;

  void startWorking()  async {
    this.setState(() {
      this._working = true;
      this._value = 0;
    });
    for(int i = 0; i< 10; i++) {
      if(!this._working)  {
        break;
      }
      await Future.delayed(Duration(seconds: 1));
      this.setState(() {
        this._value += 0.1;
      });
    }
    this.setState(() {
      this._working = false;
    });
  }

  void stopWorking() {
    this.setState(() {
      this._working = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter LinearProgressIndicator Example'),
      ),
      body: Center(
          child:  Column (
              mainAxisAlignment: MainAxisAlignment.center,
              children:  [
                SizedBox(
                  width: 250,
                  height: 20,
                  child: LinearProgressIndicator(
                    value: this._value,
                    backgroundColor: Colors.cyan[100],
                    valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
                  ),
                ),
                SizedBox(width:10, height: 10),
                Text(
                  "Percent: " + (this._value * 100).round().toString()+ "%",
                  style: TextStyle(fontSize: 20),
                ),
                ElevatedButton(
                    child: Text("Start"),
                    onPressed: this._working? null: () {
                      this.startWorking();
                    }
                ),
                ElevatedButton(
                    child: Text("Stop"),
                    onPressed: !this._working? null: () {
                      this.stopWorking();
                    }
                )
              ]
          )
      ),
    );
  }
}

4- Example: Vertical Progress

LinearProgressIndicator в основном не поддерживает вертикальное направление. Однако если вам нужен вертикальный индикатор хода выполнения, вы можете поместить его во RotatedBox с поворотом на 90 градусов.
Например:
RotatedBox(
    quarterTurns: -1,
    child: SizedBox(
        width: 250,
        height: 25,
        child : LinearProgressIndicator(
          backgroundColor: Colors.cyan[100],
          valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
        )
    )
)
  • Параметр quarterTurns = 1 означает поворот на 90 градусов по часовой стрелке.
  • В противном случае quarterTurns = -1 означает поворот на 90 градусов против часовой стрелки.

5- backgroundColor

backgroundColor используется для установки цвета фона для LinearProgressIndicator.
Color backgroundColor

6- value

double value

7- valueColor

valueColor используется для указания цветовой анимации хода выполнения (progress).
Animation<Color> valueColor
Например:
LinearProgressIndicator(
  backgroundColor: Colors.cyanAccent,
  valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
)
  • TODO Link!

8- minHeight

minHeight используется для установки минимальной высоты LinearProgressIndicator.
double minHeight

9- semanticsLabel

semanticsLabel используется для описания предполагаемого использования LinearProgressIndicator. Она полностью скрыта на интерфейсе и имеет значение для экранного считывающего устройства (Screen reader), например считывающие устройства для слепых людей.
String semanticsLabel

10- semanticsValue

semanticsValue полностью скрыто на экране. Её цель - предоставить информацию о текущем прогрессе для экранного считывающего устройства.
По умолчанию значением semanticsValue является процент выполненной работы. Например, значение свойства value равно 0,3 - это означает, что значение semanticsValue равно "30%".
String semanticsValue
Например:
LinearProgressIndicator(
  value: this._value,
  backgroundColor: Colors.cyanAccent,
  valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
  semanticsLabel: "Downloading file abc.mp3",
  semanticsValue: "Percent " + (this._value * 100).toString() + "%",
)

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.