颤振如何为凸起的按钮填充适当的颜色？

Question

我正在尝试渲染渐变按钮，但在某些设备上，渐变颜色不会像下面的图像那样展开。

我该如何解决？
谢谢！

代码

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Switch, Link } from "react-router-dom";

import "./styles.css";

const Home = () => {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();

    const getData = async () => {
      try {
        setIsLoading(true);
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/comments",
          {
            method: "get",
            headers: {
              Accept: "application/json",
              "Content-Type": "application/json"
            },
            signal: abortController.signal
          }
        );

        if (response.ok) {
          const body = await response.json();
          setData(body);
          setIsLoading(false);
          return;
        }
        const customError = {
          message: "Some Error Occured"
        };
        throw customError;
      } catch (error) {
        console.log(error.name);
        setIsLoading(false);
        if (error.name === "AbortError") {
          setErrorMessage("Request has aborted");
          return;
        }
        setErrorMessage("Internal server error");
      }
    };

    getData();
    return () => {
      abortController.abort();
    };
  }, []);

  return (
    <>
      {isLoading && <span>Loading Data, Please wait...</span>}
      {errorMessage && <span>{errorMessage}</span>}
      {data.length > 0
        ? data.map(d => {
            return <p key={d.id}>{d.name}</p>;
          })
        : null}
    </>
  );
};

const Products = () => <>Products</>;

function App() {
  return (
    <BrowserRouter>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/products">Products</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/products" component={Products} />
      </Switch>
    </BrowserRouter>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

如果您想维护RaisedButton小部件及其行为，可以执行以下操作：

RaisedButton(
  textColor: Colors.white,
  shape: StadiumBorder(),
  padding: const EdgeInsets.all(0.0),
  child: Container(
    decoration: ShapeDecoration(
      shape: StadiumBorder(),
      gradient: LinearGradient(
          colors: <Color>[Color(0xff00F260), Color(0xff0575E6)]
      ),
    ),
    padding: EdgeInsets.fromLTRB(19.0,12.0,19.0,12.0),
    child: child,
  ),
  onPressed: onPressed,
),

但是容器周围的填充物有点像作弊。 您可以使用GestureDetector包装一个容器，然后根据需要操作该容器，如下所示：

GestureDetector(
  onTap: onPressed,
  child: Container(
    decoration: ShapeDecoration(
      shape: StadiumBorder(),
      gradient: LinearGradient(
          colors: <Color>[Color(0xff00F260), Color(0xff0575E6)]
      ),
    ),
    padding: EdgeInsets.fromLTRB(19.0,12.0,19.0,12.0),
    child: Text('Lets Go',
      style: TextStyle(color: Colors.white),
    ),
  ),
),

Answer 2

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

class GradientButton extends StatelessWidget {
  final Widget child;
  final VoidCallback onPressed;

  const GradientButton({Key key, this.onPressed, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: ShapeDecoration(
        shape: const StadiumBorder(),
        gradient: LinearGradient(
          colors: [Color(0xff00F260), Color(0xff0575E6)],
        ),
      ),
      child: MaterialButton(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
        shape: const StadiumBorder(),
        child: child,
        onPressed: onPressed,
      ),
    );
  }
}

您还会获得一些MaterialButton效果，例如点击 Ripple ，在onPressed为null时 Disabled 等。对于高程集shadows属性在ShapeDecoration

中

shadows: [
  BoxShadow(
      color: Colors.black54,
      spreadRadius: 0.5,
      blurRadius: 3,
      offset: Offset(1, 1))
]