flutter 如何使用颜色参数覆盖容器构件的渐变颜色参数

4nkexdtk  于 2023-03-31  发布在  Flutter
关注(0)|答案(2)|浏览(121)

我已经使用了Container小部件的gradient参数,该参数仅在条件为true时显示渐变颜色,否则渐变颜色是透明的。
例外输出:-
如果条件为false,则Container小部件可以由color参数中传递的颜色着色。在下面的代码中,它是绿色的。
异常输出图像:-

实际产量:-
透明渐变色将覆盖指定给color参数的颜色
实际输出图像:-

注意:-color参数可以有不同的颜色,因为它也依赖于一些布尔标志,因此将gradient参数设置为相同的颜色将不起作用。

代码:-

import 'package:flutter/material.dart';

void main() => runApp(const ExampleApp());

class ExampleApp extends StatefulWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  bool showGradient = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
        child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(colors: [
                showGradient ? Colors.blue : Colors.transparent,
                showGradient ? Colors.orange : Colors.transparent,
              ]),
              color: Colors.green[100],
              border: Border.all()),
          height: 100,
          width: 100,
        ),
      )),
    );
  }
}
yduiuuwa

yduiuuwa1#

尝试代替

gradient: LinearGradient(colors: [
            showGradient ? Colors.blue : Colors.transparent,
            showGradient ? Colors.orange : Colors.transparent,
          ]),

gradient: showGradient ? LinearGradient(colors: [
            Colors.blue,
            Colors.orange
          ]) : null,
w8ntj3qf

w8ntj3qf2#

import 'package:flutter/material.dart';

void main() => runApp(const ExampleApp());

class ExampleApp extends StatefulWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  bool showGradient = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
        child: Container(
          decoration: BoxDecoration(
              gradient: showGradient ? const LinearGradient(colors: [Colors.blue, Colors.orange]) : null,
              color: Colors.green,
              border: Border.all()),
          height: 100,
          width: 100,
        ),
      )),
    );
  }
}

相关问题