0

我已经在我的颤振项目中实现了几个包含 ElevatedButtons 的长 ListView，现在想将各种 ButtonStyle 属性应用于所有这些。我确信有一种方法可以避免将这些属性单独应用于每个按钮，但无法在 Flutter 文档或 Stack Overflow 上找到任何内容。这个任务可以在全球范围内完成吗？

当前按钮具有基本样式：

            ElevatedButton(
                style: const ButtonStyle(),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => authorA()),
                  );
                },
                child: const Text("Author A")),
            ElevatedButton(
                style: const ButtonStyle(),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AuthorB()),
                  );
                },
                child: const Text("Author B")),
            ElevatedButton(
                style: const ButtonStyle(),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AuthorC()),
                  );
                },
                child: const Text("Author C)")),

我的 ListView 包含数百个这样的按钮，还有其他几个包含我想要样式的按钮的长 ListView。如果我想为所有这些修改 ButtonStyle() 属性，如下所示：

            ElevatedButton(
                style:   ButtonStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AuthorA()),
                  );
                },
                child: const Text("Author A")),
4

5 回答 5

1

使用theme或darkTheme属性MaterialApp设置全局样式。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.green,
          ),
        ),
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}
于 2022-01-03T03:52:09.887 回答
1

主要.dart

MaterialApp(
  theme: ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
        primary: Colors.orange,
      ),
    ),
  ),
);
于 2022-01-03T03:56:41.597 回答
1

当与ElevatedButtonTheme或整体主题的 ThemeData.elevatedButtonTheme 一起使用时，它会覆盖 ElevatedButtons 的默认外观的 ButtonStyle 。

样式的属性会覆盖 ElevatedButton 的默认样式，即 ElevatedButton.defaultStyleOf 返回的 ButtonStyle。仅使用样式的非空属性值或已解析的非空 MaterialStateProperty 值。

 MaterialApp(
      theme: ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
            style: ElevatedButton.styleFrom(
            primary: Colors.orange,
          ),
        ),
      ),
    );
于 2022-01-03T04:08:57.393 回答
0

使用相同的属性可以根据需要添加不同的样式，这可以使用 .. 运算符。

ElevatedButton(
                style: const ButtonStyle()..,//Just Add .. here and add new color and properties
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => authorA()),
                  );
                },
                child: const Text("Author A")),
于 2022-01-03T05:08:25.793 回答
0

使用 -> MaterialApp -> 主题 -> 提升按钮主题 -> 样式 -> 使用 styleForm -> 主：#Color

于 2022-01-03T11:30:01.537 回答