#flutter #dart
Вопрос:
Я хочу, чтобы верхняя часть изображения выглядела идеально (непрозрачно), а нижняя часть изображения была прозрачной. как я могу это сделать?
SizedBox(
width: double.infinity,
height: 400,
child: Stack(
children: [
Positioned(
left: 0,
height: 450,
child: Image.asset(
'assets/images/face_woman.png',
),
),
Positioned(
right: -40,
top: 0,
height: 450,
child: Image.asset(
'assets/images/face_man.png',
),
)
],
),
)
Ответ №1:
Оберните свои изображения Opacity
виджетом:
SizedBox(
width: double.infinity,
height: 400,
child: Stack(
children: [
Positioned(
left: 0,
height: 450,
child: Opacity(
opacity: 0.5,
child: Image.asset(
'assets/images/face_woman.png',
),
),
),
Positioned(
right: -40,
top: 0,
height: 450,
child: Opacity(
opacity: 0.5,
child: Image.asset(
'assets/images/face_man.png',
),
),
)
],
),
);
Комментарии:
1. Извините, это была не моя проблема. Я только что отредактировал его. Пожалуйста, взгляните на это. и помоги мне выбраться из этого.
2. @SouravEmon ответ очень похож. Если вы хотите поиграть с непрозрачностью виджета, используйте
Opacity
виджет.
Ответ №2:
Альтернативный подход:
AssetImage img = const AssetImage('...');
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image(
alignment: Alignment.topCenter,
image: img,
width: {width of the image},
height: {height of the image/2},
fit: BoxFit.fitWidth,
),
Opacity(
opacity: 0.3,
child: Image(
alignment: Alignment.bottomCenter,
image: img,
width: {width of the image},
height: {height of the image/2},
fit: BoxFit.fitWidth,
),
),
],
),
),
);