Question

我只是在学习flutter，我正在通过youtube教程尝试flutter中的一些示例，尝试使用boxshadow设计时，它没有出现在AVd模拟器 main.dart 中>文件的代码如下，


import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Homepage(),
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
  ));
}

// Stateless widget=>created using a shortcut-stle
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // return Container(
    //   color: Colors.blue,
    //   child: Text("Hi Flutter App"),
    // );

    //Scaffold has prebuild some widget themes
    return Scaffold(
      appBar: AppBar(
        title: Text("My App"),
      ),

      // Container is similiar to <Div>
      body: Center(
        child: Container(
            width: 100,
            height: 100,
            alignment: Alignment.center,
            padding: const EdgeInsets.all(8),
            // color: Colors.pink,
            clipBehavior: Clip.antiAlias,
            decoration: BoxDecoration(
                color: Colors.pink,
                // shape: BoxShape.circle,
                borderRadius: BorderRadius.circular(11),
                boxShadow: [
                  BoxShadow(
                      color: Colors.black,
                      blurRadius: 10.5,
                      spreadRadius: 2.2,
                      offset: Offset(5.0, 5.0))
                ]),
            child: Text("This is a box")),
      ),
    );
  }
}

在此先感谢您的简短回答，或者您可以提供一些参考链接以访问和学习知识

Answer 1

如果要阴影，请不要使用clipBehavior: Clip.antiAlias这行，因为它将删除绑定的容器（包括阴影）之外的所有像素

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Homepage(),
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
  ));
}

// Stateless widget=>created using a shortcut-stle
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // return Container(
    //   color: Colors.blue,
    //   child: Text("Hi Flutter App"),
    // );

    //Scaffold has prebuild some widget themes
    return Scaffold(
      appBar: AppBar(
        title: Text("My App"),
      ),

      // Container is similiar to <Div>
      body: Center(
        child: Container(
          width: 100,
          height: 100,
          alignment: Alignment.center,
          padding: const EdgeInsets.all(8),
          // color: Colors.pink,
          // clipBehavior: Clip.antiAlias, //Dont use this line
          decoration: BoxDecoration(
            color: Colors.pink,
            // shape: BoxShape.circle,
            borderRadius: BorderRadius.circular(11),
            boxShadow: [
              BoxShadow(
                color: Colors.black,
                blurRadius: 10.5,
                spreadRadius: 2.2,
                offset: Offset(5.0, 5.0),
              )
            ],
          ),
          child: Text("This is a box"),
        ),
      ),
    );
  }
}

Answer 2

Container(
              width: 100,
              height: 100,
              alignment: Alignment.center,
              padding: const EdgeInsets.all(8),
              // color: Colors.pink,
              //clipBehavior: Clip.antiAlias,
              decoration: BoxDecoration(
                  color: Colors.pink,
                  // shape: BoxShape.circle,
                  borderRadius: BorderRadius.circular(11),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black,
                        blurRadius: 10.5,
                        spreadRadius: 2.2,
                        offset: Offset(5.0, 5.0))
                  ]),
              child: Text("This is a box")),

解决方案：您必须停用Clip.antiAlias。希望有帮助！

抖动中的框阴影未显示

2 个答案: