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

LinearProgressIndicator
Example: Indeterminate
Example: Determinate
Example: Vertical Progress
backgroundColor
value
valueColor
minHeight
semanticsLabel
semanticsValue

1. LinearProgressIndicator

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

CircularProgressIndicator
ProgressIndicator

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),
  ),
)

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

Параметр 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 градусов.

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

Например:

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),
)

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

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() + "%",
)

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

1. LinearProgressIndicator

2. Example: Indeterminate

3. Example: Determinate

4. Example: Vertical Progress

5. backgroundColor

6. value

7. valueColor

8. minHeight

9. semanticsLabel

10. semanticsValue

Pуководства Flutter

Pуководства Flutter

Новейшие статьи