Question

请任何可以向我建议如何在此仪表板中设置背景图片的专家，我将不胜感激。当我在以下脚手架小部件中添加 boxfit 时，代码出现了红线。

import 'package:google_fonts/google_fonts.dart';
import 'package:maps_app/screens/Dash_board.dart';

class Dashboard extends StatefulWidget {
  static const routeName = '/home1';
  @override
  DashboardState createState() => new DashboardState();
}

class DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffffffff),
      body: Column(
        children: <Widget>[
          SizedBox(
            height: 110,
          ),
          Padding(
            padding: EdgeInsets.only(left: 16, right: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "ColorLine",
                      style: GoogleFonts.openSans(
                          textStyle: TextStyle(
                              color: Colors.black87,
                              fontSize: 24,
                              fontWeight: FontWeight.bold)),
                    ),
                    SizedBox(
                      height: 4,
                    ),
                    Text(
                      " Home",
                      style: GoogleFonts.openSans(
                          textStyle: TextStyle(
                              color: Color(0xff000000),
                              fontSize: 14,
                              fontWeight: FontWeight.w600)),
                    ),
                  ],
                ),
                IconButton(
                  iconSize: 70,
                  alignment: Alignment.center,
                  icon: Image.asset(
                    "assets/colorline.png",
                    width: 100,
                    height: 100,
                  ),
                  onPressed: () {},
                )
              ],
            ),
          ),
          SizedBox(
            height: 40,
          ),
          GridDashboard()
        ],
      ),
    );
  }
}

Answer 1

Scaffold(
  body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("assets/background.jpeg"),
        fit: BoxFit.cover,
      ),
    ),
    child: ...
  ),
);

Answer 2

您想要做的是用容器小部件包装您的 Scaffold。此外，您需要使 Scaffold 的颜色透明。我将使用 Vlad Konoshenko 的一些回答来帮助您解决这个问题。

return Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("assets/background.jpeg"),
        fit: BoxFit.cover,
      ),
    ),
    child: Scaffold(
      backgroundColor: Colors.transparent,
      // Rest of the code remains same.
      ...
    ),
);

在颤振仪表板中添加背景

2 个答案: