标签: material3

我需要使用 Jetpack Compose 和 Material3 实现带有标签的开关。

到目前为止我的解决方案（它基本上只是扩展现有的 switch 组件并添加属性label）：

@Composable
fun LabeledSwitch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    thumbContent: (@Composable () -> Unit)? = null,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: SwitchColors = SwitchDefaults.colors(),
    label: (@Composable () -> Unit),
) {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        label()
        Switch(
            checked = checked,
            onCheckedChange = onCheckedChange,
            thumbContent = thumbContent,
            enabled = enabled,
            interactionSource = interactionSource,
            colors …

我有一个带有Textfield搜索栏的屏幕，当屏幕首次显示时，它会自动对焦。问题是，在screen rotationor system theme change（深色模式/浅色模式）之后，cursor即使 TextField 的值不为空并且键盘自行消失，也会在 TextField 的开头移动。请帮忙，我已经找了两天了。一些代码示例：

撰写版本：1.3.0 材料 3：1.0.0

SearchBookScreen.kt

val myViewModel = SearchBookViewModel()

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SearchBookScreen(
    modifier: Modifier = Modifier,
    navController: NavController,
    viewModel: SearchBookViewModel = myViewModel,
    filters: Map<SearchFilterType, FilterOptions> = FILTERS
) {
    val focusRequester = remember { FocusRequester() } 

val searchInputValue = viewModel.searchInputValue.value
val filtersState = viewModel.filtersState

LaunchedEffect(Unit) { this.coroutineContext.job.invokeOnCompletion { focusRequester.requestFocus() } }

Scaffold(
    topBar = {
        Column {
            TextField(
                singleLine = true,
                placeholder = { …

我正在使用 Material design 3 和 Jetpack compose。

默认情况下，按钮形状的圆角半径为 full 类型，即 20dp。根据文档。 https://m3.material.io/components/buttons/overview

如果我查看形状文档，我可以在令牌部分看到以下形状

但是，当我向应用程序的主题提供 Shapes 对象时。我没有自定义完整形状的选项。

这是我的代码

Shapes(
    extraSmall = RoundedCornerShape(4.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(8.dp)
)

我想要实现的目标：

1. 我不想为每个按钮显式指定形状或为按钮创建可组合项，然后在任何地方重复使用它。

我想应用它一次，不需要像其他组件一样显式指定它

所以我决定在 Flutter 中尝试一下 Material 3，它改变了很多颜色、字体等。

我知道某些东西看起来会有所不同，例如卡片上的圆角，但我没想到所有字体和卡片颜色都会改变。我实际上只是将其添加useMaterial3: true,到下面的代码中：

child: MaterialApp(
          debugShowCheckedModeBanner: false,
          routes: appRoutes,
          theme: ThemeData(
            useMaterial3: true,
            scaffoldBackgroundColor: const Color(0xFF2b8293),
          ),
          home: const CheckLogin(),
        ),

以下是前后图片变化的示例：

无论如何要更改默认的卡片颜色和标题字体，这样我就不必在应用程序的每个视图中一一更改它们？

同样奇怪的是，垂直的三点图标变成了黑色，而搜索图标却没有。谢谢！

我想让状态栏与 Material 3 jetpack compose 项目中的顶部应用程序栏颜色相同，并且还想在滚动时实现色调提升。如何实现这一目标？

valscrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        SmallTopAppBar(
            scrollBehavior = scrollBehavior,

我也希望状态栏也一样。

我使用下面的代码在 Android 中使用 XML 创建一个材质 3 开关，它比普通开关大得多。有什么办法可以让它变小吗？

<com.google.android.material.materialswitch.MaterialSwitch   
   android:id="@+id/biometrics_switch"   
   style="@style/Widget.Material3.CompoundButton.MaterialSwitch"   
   android:layout_width="wrap_content"   
   android:layout_height="wrap_content"   
   app:layout_constraintEnd_toEndOf="parent"   
   app:layout_constraintTop_toTopOf="parent"   
   app:switchPadding="@dimen/_10sdp" android:minHeight="@dimen/_10sdp" 
   app:thumbTint="@color/white" app:trackTint="@color/neutral_800" />

尝试将高度添加到 Scaffold topBar 中的 TopAppBar。使用Jetpack compose，材质3。

这是以前的工作方式：

TopAppBar(
        title = {
            Text(text = title)
        },
        elevation = 3.dp //Not valid anymore
    )

TopAppBar 当前允许的参数有：

public fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier,
    navigationIcon: @Composable () -> Unit,
    actions: @Composable() (RowScope.() -> Unit),
    windowInsets: WindowInsets,
    colors: TopAppBarColors,
    scrollBehavior: TopAppBarScrollBehavior?
): Unit

这就是我所拥有的：

这就是我需要的：

可以在使用参数传递高程之前完成此操作，但这不再是选项。

提升整个 TopAppBar 的解决方案是什么？提前致谢！

我将flutter 3.3.10升级到3.7.3。在材质3中，BottomAppBar的背景颜色没有改变。BottomAppBar、BottomStyleSheet等的背景出现粉红色阴影。并且BottomAppBar和BottomNavigationBar不合并，它们单独作用 see image。当我切换到材质 2 设计时，效果很好，但有些动画会受益于材质 3 设计。

import 'package:bottom_navbar/constants/app_assets.dart';
import 'package:bottom_navbar/constants/app_colors.dart';
import 'package:bottom_navbar/constants/app_labels.dart';
import 'package:bottom_navbar/constants/app_styles.dart';
import 'package:bottom_navbar/size_config.dart';
import 'package:flutter/material.dart';

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    int ci = 0;
    return Scaffold(
      backgroundColor: Colors.white,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
          heroTag: AppLabels.addOrEditHero,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
          onPressed: () {},
          backgroundColor: AppColors.colorWhite,
          child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(width: 3, color: AppColors.colorWhite)),
            child: Image.asset(
              AppAssets.add, …

我正在迁移到 Material 3，现在我的警报对话框的圆角下方有不需要的颜色。

如何删除不需要的颜色并获得漂亮的圆形对话框？

我正在使用 1.0.0 版本的 androidx.compose.material3.AlertDialog。

这是其中一个对话框的代码

@Composable
fun NewClientSourceDialog(
    onDoNothingClick: () -> Unit,
    onImportClick: () -> Unit,
    onAddNewClick: () -> Unit,
) {
    AlertDialog(
        onDismissRequest = onDoNothingClick,
        text = {
            DialogText(id = R.string.clients_new_client_source)
        },
        confirmButton = {
            Column(
                modifier = Modifier
                    .padding(all = 8.dp)
                    .fillMaxWidth(),
                verticalArrangement = Arrangement.Bottom,
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                DialogButton(
                    onClick = onImportClick,
                    captionId = R.string.clients_import_contacts,
                )
                DialogButton(
                    onClick = onAddNewClick,
                    captionId = R.string.clients_create_from_scratch,
                )
                DialogButton(
                    onClick = onDoNothingClick,
                    captionId = R.string.clients_new_client_dismiss
                ) …

如何定制 Material 3 开关？

正如您所看到的，我已经将大部分开关自定义为红色，这里唯一缺少的是“边框”，由于某种原因它被设置为白色，我看不到可以修改为红色的参数。

我还阅读了该类的 Flutter 文档Switch：https://api.flutter.dev/flutter/material/Switch-class.html，但有 2 个示例使用 Material 2，唯一的 Material 3 示例不会修改默认边框。

这是当前的小部件配置：

Switch(
  // focusColor: Colors.blue,
  trackColor: MaterialStateProperty.resolveWith(
    (Set<MaterialState> states) {
      if (states.contains(MaterialState.selected)) {
        return Colors.red;
      }
      return Colors.red.withOpacity(.1);
    },
  ),
  overlayColor: MaterialStateProperty.resolveWith(
    (Set<MaterialState> states) {
      if (states.contains(MaterialState.disabled)) {
        return Colors.red;
      }
      return Colors.white.withOpacity(.1);
    },
  ),
  // hoverColor: Colors.green,
  thumbColor: MaterialStateProperty.resolveWith(
    (Set<MaterialState> states) {
      if (states.contains(MaterialState.selected)) {
        return HSLColor.fromColor(Colors.red)
            .withLightness(0.2)
            .toColor();
      }
      return Colors.red;
    },
  ),
  splashRadius: 24,
  // inactiveTrackColor: Colors.pink,
  // …