gpt4 book ai didi

dart - 透明背景显示白色的自定义小部件

转载 作者:IT王子 更新时间:2023-10-29 07:13:55 25 4
gpt4 key购买 nike

我正在尝试学习 Flutter udacity 类(class),在这部分代码中,我需要创建一个具有透明背景的自定义小部件,但它显示的是白色背景。父背景设置为稍微透明的绿色,我在父小部件中使用 Scaffold。如何让自定义类别小部件的背景透明?

ma​​in.dart

import 'package:flutter/material.dart';
import 'package:unit_converter/category.dart';

const _categoryName = 'Cake';
const _categoryIcon = Icons.cake;
const _categoryColor = Colors.green;


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


class UnitConverterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Unit Converter',
home: Scaffold(
backgroundColor: Colors.green[100],
body: Center(
child: Category(
name: _categoryName,
color: _categoryColor,
iconLocation: _categoryIcon,
),
),
),
);
}
}

类别.dart

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

class Category extends StatelessWidget {


final String name;
final ColorSwatch color;
final IconData iconLocation;


static const _height = 100.0;
static const _radius = _height / 2;
static const _padding = 8.0;
static const _iconSize = 60.0;
static const _textSize = 24.0;
static const _iconPadding = 16.0;

const Category({
Key key,
@required this.name,
@required this.color,
@required this.iconLocation,
}) : assert(name != null),
assert(color != null),
assert(iconLocation != null),
super(key: key);


@override
Widget build(BuildContext context) {
return Material(
child: Container(
color: Colors.transparent,
height: _height,
child: Padding(
padding: EdgeInsets.all(_padding),
child: InkWell(
borderRadius: BorderRadius.circular(_radius),
splashColor: color,
highlightColor: color,
onTap: () => print('I was tapped!'),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: EdgeInsets.all(_iconPadding),
child: Icon(
iconLocation,
size: _iconSize,
),
),
Center(
child: Text(
name,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headline,
),
),
],
),
),
),
),
);
}
}

最佳答案

只需设置 Material color: Colors.transparent, 而不是 Container

enter image description here

@override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: Container(
height: _height,
child: Padding(
padding: EdgeInsets.all(_padding),
child: InkWell(
borderRadius: BorderRadius.circular(_radius),
splashColor: color,
highlightColor: color,
onTap: () => print('I was tapped!'),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: EdgeInsets.all(_iconPadding),
child: Icon(
iconLocation,
size: _iconSize,
),
),
Center(
child: Text(
name,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headline,
),
),
],
),
),
),
),
);
}

关于dart - 透明背景显示白色的自定义小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50789863/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com