RaisedButton против ElevatedButton, FlatButton против TextButton и OutlineButton против OutlinedButton

ProgramBox

RaisedButton против ElevatedButton, FlatButton против TextButton и OutlineButton против OutlinedButton

Post author:admin
Запись опубликована:12 марта, 2023
Post category:Вопросы по программированию

#flutter

Вопрос:

Я вижу предупреждение, используя старые кнопки:

‘RaisedButton’ устарел и не должен использоваться.

‘FlatButton’ устарел и не должен использоваться.

‘OutlineButton’ устарел и не должен использоваться.

Итак, в чем разница между:

RaisedButton и ElevatedButton
FlatButton против TextButton
OutlineButton против OutlinedButton

Ответ №1:

Здесь я нашел документы для перехода на новые кнопки материалов и их темы

Следующее изображение говорит само за себя, в чем разница между всеми.

Визуально новые кнопки выглядят немного иначе, потому что они соответствуют текущей спецификации Material Design, а их цвета настроены с точки зрения общей цветовой схемы темы. Есть и другие небольшие различия в заполнении, закругленных радиусах углов и обратной связи при наведении / фокусировке / нажатии.

Вы можете просмотреть Обзор изменений для получения дополнительной информации об изменениях.

1. Спасибо за ваш ответ помимо того, что в их тексте я видел черный и фиолетовый цвета, я не видел никакой существенной разницы между ними, кроме отключенного RaisedButton.icon vs ElevatedButton.icon , и это тоже просто изменение цвета.

Ответ №2:

Первые — устаревшие классы.

Цитаты из документации Flutter:

FlatButton, RaisedButton и OutlineButton были заменены на TextButton, ElevatedButton и OutlinedButton соответственно.

Исходные классы скоро устареют, пожалуйста, перенесите код, который их использует.

1. Я бы хотел, чтобы они подготовили хорошую документацию для этих трех новых классов. Все, что я могу найти, это объявления классов. Теперь примеры или документы описания виджета.

Ответ №3:

Это устаревшие классы, поэтому в конечном итоге ваш старый код должен исчезнуть. (и этот документ поможет вам сделать именно это.) Однако это может потребовать много работы, поэтому, чтобы сдвинуть дело с мертвой точки, я создал некоторый код для переноса FlatButton и RaisedButton в новые TextButton и ElevatedButton «на место». Они аналогичны друг другу, но по-разному подходят к стилю, который обрабатывается этим кодом.

Вот ссылка на суть, если вы хотите запустить ее в dartpad.dev (я не смог получить прямую ссылку): https://gist.github.com/wterrill/7942b4bf5d74a8b2ace952ebf213fe5d

Вот сам код:

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final bool disableButton = true; // <-- Change this to see buttons disabled
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FlatButton(
                  child: Text("FlatButton"),
                  onPressed: disableButton
                      ? null
                      : () {
                          print("FlatButton normal");
                        },
                  color: Colors.green,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                  disabledColor: Colors.grey,
                  disabledTextColor: Colors.pink),
              SizedBox(height: 25),
              FlatButtonX(
                  childx: Text("TextButton"),
                  onPressedx: disableButton
                      ? null
                      : () {
                          print("FlatButtonX (TextButton)");
                        },
                  colorx: Colors.green,
                  textColorx: Colors.black,
                  shapex: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                  disabledColorx: Colors.grey,
                  disabledTextColorx: Colors.pink),
              SizedBox(height: 100),
              RaisedButton(
                child: Text('RaisedButton'),
                color: Colors.green,
                textColor: Colors.black,
                onPressed: disableButton
                      ? null
                      : () {
                          print("RaisedButton normal");
                        },
                shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                disabledColor: Colors.grey,
                  disabledTextColor: Colors.pink,
              ),
              SizedBox(height: 25),
              RaisedButtonX(
                childx: Text('ElevatedButton'),
                colorx: Colors.green,
                textColorx: Colors.black,
                onPressedx:disableButton
                      ? null
                      : () {
                          print("RaisedButtonX (ElevatedButton)");
                        },
                shapex: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                        Radius.circular(50),
                      ),
                      side: BorderSide(color: Colors.purple, width: 3.0)),
                                  disabledColorx: Colors.grey,
                  disabledTextColorx: Colors.pink,
              )
            ],
          ),
        ),
      ),
    );
  }
}

Widget FlatButtonX(
    {Color colorx,
    @required Widget childx,
    RoundedRectangleBorder shapex,
    @required Function onPressedx,
    Key keyx,
    Color disabledColorx,
    Color disabledTextColorx,
    Color textColorx}) {
  if (disabledTextColorx == null amp;amp; textColorx == null) {
    disabledTextColorx = colorx;
  }
  if (textColorx == null) {
    textColorx = colorx;
  }
  return TextButton(
      key: keyx,
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          // text color
          (Set<MaterialState> states) => states.contains(MaterialState.disabled)
              ? disabledTextColorx
              : textColorx,
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          // background color    this is color:
          (Set<MaterialState> states) =>
              states.contains(MaterialState.disabled) ? disabledColorx : colorx,
        ),
        shape: MaterialStateProperty.all(shapex),
      ),
      onPressed: onPressedx as void Function(),
      child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0), child: childx));
}

Widget RaisedButtonX(
    {Color colorx,
    @required Widget childx,
    RoundedRectangleBorder shapex,
    @required Function onPressedx,
    Key keyx,
    Color disabledColorx,
    Color disabledTextColorx,
    Color textColorx}) {
  if (disabledTextColorx == null amp;amp; textColorx == null) {
    disabledTextColorx = colorx;
  }
  if (textColorx == null) {
    textColorx = colorx;
  }
  return ElevatedButton(
      key: keyx,
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          // text color
          (Set<MaterialState> states) => states.contains(MaterialState.disabled)
              ? disabledTextColorx
              : textColorx,
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          // background color    this is color:
          (Set<MaterialState> states) =>
              states.contains(MaterialState.disabled) ? disabledColorx : colorx,
        ),
        shape: MaterialStateProperty.all(shapex),
      ),
      onPressed: onPressedx as void Function(),
      child: childx);
}

Ответ №4:

Одним из преимуществ ElevatedButton over RaisedButton является то, что он фактически подбирает цвет вашей основной темы по умолчанию.

Таким образом, вам даже не нужно добавлять этот пользовательский цвет фона. Вам нужно будет только внести свой собственный стиль ElevatedButton , если вы хотите отклониться от основной темы или стилизовать другие аспекты кнопки.

Ответ №5:

Я понимаю, что они действительно эквивалентны. Согласно анонсу Flutter 1.22, основной мотивацией был стиль. До Flutter 1.22 существовала только ОДНА тема ButtonTheme для 3 типов кнопок, тогда как теперь у каждого типа кнопок своя тема.

Ответ №6:

Виджеты FlatButton, RaisedButton и OutlineButton были заменены на TextButton, ElevatedButton и OutlinedButton соответственно.

Ссылка, объясняющая изменения:

https://flutter.dev/docs/release/breaking-changes/buttons

Как использовать кнопки:

https://flutter.dev/docs/development/ui/widgets/material

Ответ №7:

вы не можете установить borderSide shape ни на OutlinedButton, даже если вы могли бы на OutlineButton

1. Я думаю, что это больше подходит в качестве комментариев, чем ответа.

2. Во-вторых, я еще не проверял, но я уверен, что вы также можете установить границу для OutlinedBorder, используя свойство style .

Ответ №8:

Альтернативные кнопки, такие как TextButton , ElevatedButton , и OutlinedButton не совсем просты, как раньше. Мы все еще можем использовать эти устаревшие кнопки, используя пакет legacy_buttons

https://pub.dev/packages/legacy_buttons/