Question

我有一个下面的屏幕和一个底部栏，如下图：

我现在需要使底部栏透明，我尝试通过用容器包裹填充来添加透明颜色，但效果不佳...

这是主屏幕的以下代码：

import 'package:deliveryapp/domain/repository/api_repository.dart';
import 'package:deliveryapp/domain/repository/local_storage_repository.dart';
import 'package:deliveryapp/presentation/common/theme.dart';
import 'package:deliveryapp/presentation/provider/home/cart/cart_bloc.dart';
import 'package:deliveryapp/presentation/provider/home/cart/cart_screen.dart';
import 'package:deliveryapp/presentation/provider/home/home_bloc.dart';
import 'package:deliveryapp/presentation/provider/home/products/products_screen.dart';
import 'package:deliveryapp/presentation/provider/home/profile/profile_screen.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class HomeScreen extends StatelessWidget {
  HomeScreen._();

  static Widget init(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => HomeBLoC(
            apiRepositoryInterface: context.read<ApiRepositoryInterface>(),
            localRepositoryInterface: context.read<LocalRepositoryInterface>(),
          )..loadUser(),
          builder: (_, __) => HomeScreen._(),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    final bloc = Provider.of<HomeBLoC>(context);
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: IndexedStack(
              index: bloc.indexSelected,
              children: [
                ProductsScreen.init(context),
                const Placeholder(),
                const CartScreen(),
                const Placeholder(),
                ProfileScreen.init(context),
              ],
            ),
          ),
          _DeliveryNavigationBar(
            index: bloc.indexSelected,
          ),
        ],
      ),
    );
  }
}

class _DeliveryNavigationBar extends StatelessWidget {
  final int index;

  _DeliveryNavigationBar({
    Key key,
    this.index,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final bloc = Provider.of<HomeBLoC>(context);
    final cartBloc = Provider.of<CartBLoC>(context);
    final user = bloc.user;
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: DecoratedBox(
        decoration: BoxDecoration(
          color: Theme.of(context).canvasColor,
          border: Border.all(
            color: Theme.of(context).bottomAppBarColor,
            width: 2,
          ),
          borderRadius: BorderRadius.circular(25),
        ),
        child: Padding(
          padding: const EdgeInsets.all(5.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Expanded(
                child: Material(
                  child: IconButton(
                    icon: Icon(
                      Icons.home,
                      color: index == 0
                          ? DeliveryColors.green
                          : DeliveryColors.lightGrey,
                    ),
                    onPressed: () => bloc.updateIndexSelected(0),
                  ),
                ),
              ),
              Expanded(
                child: Material(
                  child: IconButton(
                    icon: Icon(
                      Icons.store,
                      color: index == 1
                          ? DeliveryColors.green
                          : DeliveryColors.lightGrey,
                    ),
                    onPressed: () => bloc.updateIndexSelected(1),
                  ),
                ),
              ),
              Expanded(
                child: Material(
                  child: Center(
                    child: Stack(
                      children: [
                        CircleAvatar(
                          backgroundColor: DeliveryColors.blackBlue,
                          radius: 23,
                          child: IconButton(
                            icon: Icon(
                              Icons.shopping_basket,
                              color: index == 2
                                  ? DeliveryColors.green
                                  : DeliveryColors.white,
                            ),
                            onPressed: () => bloc.updateIndexSelected(2),
                          ),
                        ),
                        Positioned(
                          right: 0,
                          child: cartBloc.totalItems == 0
                              ? const SizedBox.shrink()
                              : CircleAvatar(
                                  radius: 10,
                                  backgroundColor: Colors.pinkAccent,
                                  child: Text(
                                    cartBloc.totalItems.toString(),
                                  ),
                                ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Material(
                  child: IconButton(
                    icon: Icon(
                      Icons.favorite_border,
                      color: index == 3
                          ? DeliveryColors.green
                          : DeliveryColors.lightGrey,
                    ),
                    onPressed: () => bloc.updateIndexSelected(3),
                  ),
                ),
              ),
              Expanded(
                child: InkWell(
                  onTap: () => bloc.updateIndexSelected(4),
                  child: user?.image == null
                      ? const SizedBox.shrink()
                      : Center(
                          child: CircleAvatar(
                            radius: 15,
                            backgroundImage: AssetImage(
                              user.image,
                            ),
                          ),
                        ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以使用Opacity Class

<块引用>

使其子项部分透明的小部件。此类将其子级绘制到中间缓冲区中，然后将子级混合回部分透明的场景。

专为此用例设计：

public static async Task<IEnumerable<EducationOutcome>> GetOutcomesForSubmission()
{
  var outcomes = await graphClient
    .Education
    .Classes["8557483b-a233-4710-82de-e1bdb03bb9a9"]
    .Assignments["1b09cd43-cf87-4cef-a043-ae3d6160c200"]
    .Submissions["d4486e20-1b47-4b5b-720c-0fe0038d4882"]
    .Outcomes
    .Request()
    .GetAsync();

  return outcomes;
}

public static void ListOutcomes()
{
  var outcomes = GetOutcomesForSubmission().Result;

  Console.WriteLine("Outcomes:\n");

  foreach (var v in outcomes)
  {
    Console.WriteLine($"User id: {v.LastModifiedBy.User.Id}, Submission id: {v.Id}");
  }

  Console.WriteLine("\n");
}

同时将 extendBody: true 添加到您的 Scaffold：

return Opacity(opacity: 0.5, child: Padding(...

如何使自定义小部件的颜色透明

1 个答案: