Question

我正在写一个Flutter应用程序，我想使用/实施＆＃34;磨砂玻璃＆＃34;在iOS上常见的效果。我该怎么做？

Answer 1

您可以使用BackdropFilter widget来达到此效果。

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

void main() {
  runApp(new MaterialApp(home: new FrostedDemo()));
}

class FrostedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: <Widget>[
          new ConstrainedBox(
            constraints: const BoxConstraints.expand(),
            child: new FlutterLogo()
          ),
          new Center(
            child: new ClipRect(
              child: new BackdropFilter(
                filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                child: new Container(
                  width: 200.0,
                  height: 200.0,
                  decoration: new BoxDecoration(
                    color: Colors.grey.shade200.withOpacity(0.5)
                  ),
                  child: new Center(
                    child: new Text(
                      'Frosted',
                      style: Theme.of(context).textTheme.display3
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

我想我不知道'磨砂'的确切含义（如果我的例子在这里不起作用），

function time_difference($time_1, $time_2, $limit = null)
    {

        $val_1 = new DateTime($time_1);
        $val_2 = new DateTime($time_2);

        $interval = $val_1->diff($val_2);

        $output = array(
            "year" => $interval->y,
            "month" => $interval->m,
            "day" => $interval->d,
            "hour" => $interval->h,
            "minute" => $interval->i,
            "second" => $interval->s
        );

        $return = "";
        foreach ($output AS $key => $value) {

            if ($value == 1)
                $return .= $value . " " . $key . " ";
            elseif ($value >= 1)
                $return .= $value . " " . $key . "s ";

            if ($key == $limit)
                return trim($return);
        }
        return trim($return);
    }


    $time1 = '2018/04/10 14:54:55';
    $time2 = '2018/04/10 14:56:10';

    $resp = time_difference ($time1, $time2);

    echo $resp;

结果：

我希望这会对某人有所帮助。

Answer 3

为了获得所需的输出，我们可以使用 blurrycontainer 包

blurrycontainer 使用 Frosty Glass 效果制作容器，您可以在其中控制模糊半径、高度、模糊颜色等。

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

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          height: double.infinity,
          width: double.infinity,
          decoration: BoxDecoration(
            color: Colors.white,
            image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage('https://ranjeetrocky.000webhostapp.com/bg5.jpg'),
            ),
          ),
          child: SafeArea(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.white,
                  height: 150,
                  width: 250,
                ),
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.black,
                  height: 150,
                  width: 350,
                ),
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.purple,
                  blur: 2,
                  height: 120,
                  width: 150,
                ),
                BlurryContainer(
                  borderRadius: BorderRadius.circular(20),
                  bgColor: Colors.lightBlueAccent,
                  height: 180,
                  width: 180,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 4

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),
  child: Container(
    color: Colors.black.withOpacity(_opacity),
  ),
),

我该怎么做＆＃34;磨砂玻璃＆＃34;颤动的效果？

4 个答案: