betacode

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

View more Tutorials:

1- ElevatedButton

В Flutter, ElevatedButton используется для создания кнопки с высотой (elevation) больше 0 по умолчанию.
Класс ElevatedButton создан для замены класса RaisedButton (который помечен как устаревший с октября 2020 года). Это одна из попыток команды разработчиков Flutter, которые направленны на упрощение и согласование Flutter API.
ElevatedButton Constructor:
ElevatedButton Constructor
const ElevatedButton(
    {Key key,
    @required Widget child,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus: false,
    Clip clipBehavior: Clip.none
    }
)
ElevatedButton.icon constructor:
ElevatedButton.icon Constructor
ElevatedButton.icon(
    {Key key,
    @required Widget icon,
    @required Widget label,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus,
    Clip clipBehavior
  }
)
Если обе функции callback: onPressedonLongPress не указаны, ElevatedButton будет отключена (disabled) и не будет иметь ответа при касании.

2- Examples

Ниже приведен пример, состоящий из двух ElevatedButton, одна ElevatedButton по умолчанию, а другая ElevatedButton с пользовательским стилем. В нажатом (pressed) или отключенном состоянии (disabled) они имеют высоту (elevation) 0, а в других состояниях она имеют высоту 10.
main.dart (ex1)
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,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
            title: Text("Flutter ElevatedButton Example")
        ),
        body: Center (
            child: Column (
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton (
                  child: Text("Default ElevatedButton"),
                  onPressed: () {},
                ),
                ElevatedButton (
                    child: Text("Custom ElevatedButton"),
                    onPressed: () {},
                    style: ButtonStyle(
                        foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
                        elevation: MaterialStateProperty.resolveWith<double>(
                              (Set<MaterialState> states) {
                            if (states.contains(MaterialState.pressed)
                                ||  states.contains(MaterialState.disabled)) {
                              return 0;
                            }
                            return 10;
                          },
                        )
                    )
                )
              ],
            )
        )
    );
  }
}

3- child

child - Это наиболее важное свойство ElevatedButton, в большинстве случаев, оно представляет собой объект Text.
@required Widget child
Самым простым примером с child является объект Text:
ElevatedButton (
  child: Text("Default ElevatedButton"),
  onPressed: () {},
)
Путём присвоения объекта Row свойству child, можно создать более сложную ElevatedButton, включающую Icon и Text.
child (ex2)
// 1 Icon and 1 Text
ElevatedButton (
  child: Row (
    children: [
      Icon(Icons.settings),
      SizedBox(width: 5),
      Text("Settings")
    ],
  ) ,
  onPressed: () {},
)

// 2 Icons and 1 Text
ElevatedButton (
  child: Row (
    children: [
      Icon(Icons.directions_bus),
      Icon(Icons.train),
      SizedBox(width: 5),
      Text("Transportation")
    ],
  ) ,
  onPressed: () {},
)
Однако лучший способ получить ElevatedButton с текстом и значком - это использовать конструктор ElevatedButton.icon:
main.dart (ex2)
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,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(

        appBar: AppBar(
            title: Text("Flutter ElevatedButton Example")
        ),
        body: Center (
            child: ElevatedButton.icon (
              icon: Icon(Icons.settings),
              label: Text("Settings"),
              onPressed: () {},
            )
        )
    );
  }
}

4- onPressed

onPressed - это функция callback, вызываемая при нажатии (click) пользователем на кнопку. В частности, событие onPressed произойдет, когда пользователь завершит 2 действия, включающих нажатие (press down) и отпускание (release) кнопки.
@required VoidCallback onPressed
Примечание: Если оба свойства onPressed и onLongPress не указаны, кнопка будет отключена и при касании не будет никакого ответа.
main.dart (onPressed ex1)
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,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class MyHomePageState extends State<MyHomePage> {
  int pressCount = 0;
  final List<Color> colors = [Colors.amberAccent, Colors.cyan, Colors.deepOrangeAccent];


  @override
  Widget build(BuildContext context) {
    return Scaffold (
        backgroundColor:  this.colors[ pressCount % this.colors.length],
        appBar: AppBar(
          title: Text("Flutter ElevatedButton Example"),
        ),
        body: Center (
          child:  ElevatedButton (
              child: Text("Click Me! " + this.pressCount.toString()),
              onPressed: ()  {
                this.setState(() {
                  this.pressCount++;
                });
              }
          ),
        )
    );
  }
}

5- onLongPress

onLongPress - это функция callback. Она вызывается, когда пользователь нажимает (press down) кнопку в течение времени более LONG_PRESS_TIMEOUT миллисекунд. Событие Long-Press будет происходить в LONG_PRESS_TIMEOUT-момент времени после нажатия пользователем если в течение этого времени (0 -> LONG_PRESS_TIMEOUT) курсор мыши не перемещается.
VoidCallback onLongPress
Если вы назначите две функции callback: onPressed и onLongPress для одной кнопки, то в любой ситуации будет вызвана не более одной функции.
LONG_PRESS_TIMEOUT 500 milliseconds
Если пользователь нажмет (press down) и отпустит (release) её до времени LONG_PRESS_TIMEOUT, произойдет только одно событие onPressed.
Если пользователь нажмет её дольше, чем LONG_PRESS_TIMEOUT миллисекунд, произойдет событие onLongPress, и Flutter проигнорирует событие onPressed, которое произойдет после этого.
main.dart (onLongPress ex1)
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,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class MyHomePageState extends State<MyHomePage> {
  int pressedCount = 0;
  int longPressCount = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
          title: Text("Pressed: " + this.pressedCount.toString()
              +" --- Long Press: " + this.longPressCount.toString()),
        ),
        body: Center (
          child:  ElevatedButton (
              child: Text("Test Me"),
              onPressed: onPressHander,
              onLongPress: onLongPressHandler
          ),
        )
    );
  }

  onPressHander()  {
    this.setState(() {
      this.pressedCount++;
    });

    showDialog (
        context: context,
        builder: (_) => new AlertDialog(
          title: new Text("Message"),
          content: new Text("OK, You just Pressed!"),
          actions: <Widget>[
            FlatButton(
              child: Text('Close me!'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ],
        ));
  }

  onLongPressHandler()  {
    this.setState(() {
      this.longPressCount++;
    });
    showDialog (
        context: context,
        builder: (_) => new AlertDialog(
          title: new Text("Message"),
          content: new Text("Hey, I show up for long press"),
          actions: <Widget>[
            FlatButton(
              child: Text('Close me!'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ],
        ));
  }

}

6- style

Свойство  style используется для настройки стиля кнопки.
ButtonStyle style
ButtonStyle constructor
const ButtonStyle(
    {MaterialStateProperty<TextStyle> textStyle,
    MaterialStateProperty<Color> backgroundColor,
    MaterialStateProperty<Color> foregroundColor,
    MaterialStateProperty<Color> overlayColor,
    MaterialStateProperty<Color> shadowColor,
    MaterialStateProperty<double> elevation,
    MaterialStateProperty<EdgeInsetsGeometry> padding,
    MaterialStateProperty<Size> minimumSize,
    MaterialStateProperty<BorderSide> side,
    MaterialStateProperty<OutlinedBorder> shape,
    MaterialStateProperty<MouseCursor> mouseCursor,
    VisualDensity visualDensity,
    MaterialTapTargetSize tapTargetSize,
    Duration animationDuration,
    bool enableFeedback}
)
Стиль ElevatedButton по умолчанию определяется методом defaultStyleOf.
@override
ButtonStyle defaultStyleOf (
     BuildContext context
)
Например, ElevatedButton с изменяемым цветом фона (background color) и цветом текста (foreground color) в зависимости от её состояния.
style (ex1)
ElevatedButton (
    child: Text("ElevatedButton 1"),
    onPressed: () {},
    style: ButtonStyle (
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
                (Set<MaterialState> states) {
              if (states.contains(MaterialState.pressed)) {
                return Colors.black45;
              }
              return null; // Use the component's default.
            }
        ),
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
              (Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed)) {
              return Colors.yellow;
            }
            return null; // Use the component's default.
          },
        )
    )
)
Пример: ElevatedButton с высотой (elevation) 10 имеет высоту 0 в нажатом (pressed) или отключенном (disabled) состоянии.
style (ex2)
ElevatedButton (
    child: Text("ElevatedButton 2"),
    onPressed: () {},
    style: ButtonStyle(
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
                (Set<MaterialState> states) {
              if (states.contains(MaterialState.disabled)) {
                return Colors.black26;
              }
              return Colors.cyan;
            }
        ),
        // foregroundColor is red for all states.
        foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
        elevation: MaterialStateProperty.resolveWith<double>(
              (Set<MaterialState> states) {
            if (states.contains(MaterialState.pressed)
                ||  states.contains(MaterialState.disabled)) {
              return 0;
            }
            return 10;
          },
        )
    )
)

ElevatedButton.styleFrom()

Статический метод ElevatedButton.styleFrom() - это удобный способ создания стиля для ElevatedButton из простых значений.
ElevatedButton.styleFrom static method
ButtonStyle styleFrom (
    {Color primary,
    Color onPrimary,
    Color onSurface,
    Color shadowColor,
    double elevation,
    TextStyle textStyle,
    EdgeInsetsGeometry padding,
    Size minimumSize,
    BorderSide side,
    OutlinedBorder shape,
    MouseCursor enabledMouseCursor,
    MouseCursor disabledMouseCursor,
    VisualDensity visualDensity,
    MaterialTapTargetSize tapTargetSize,
    Duration animationDuration,
    bool enableFeedback}
)
Например:
style (ex3)
ElevatedButton.icon (
  icon: Icon(Icons.settings),
  label: Text("Settings"),
  onPressed: () {},
  // Use ElevatedButton.styleFrom static method
  style: ElevatedButton.styleFrom(
      shadowColor : Colors.redAccent,
      elevation: 10,
      minimumSize: Size( 100,   80 )
  )
)
  • TODO Link!
  • TODO Link!

7- focusNode

FocusNode focusNode
  • TODO Link!

8- autofocus

bool autofocus: false
  • TODO Link!

9- clipBehavior

Clip clipBehavior: Clip.none
  • TODO Link!

View more Tutorials:

Maybe you are interested

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