如何在 Flutter 中设置主屏幕的背景颜色?
Posted
技术标签:
【中文标题】如何在 Flutter 中设置主屏幕的背景颜色?【英文标题】:How do I set the background color of my main screen in Flutter? 【发布时间】:2017-10-04 23:33:50 【问题描述】:我正在学习 Flutter,而且我是从最基础的开始。我没有使用 MaterialApp。设置全屏背景色有什么好方法?
这是我目前所拥有的:
import 'package:flutter/material.dart';
void main()
runApp(new MyApp());
class MyApp extends StatelessWidget
// This widget is the root of your application.
@override
Widget build(BuildContext context)
return new Center(child: new Text("Hello, World!"));
我的一些问题是:
设置背景颜色的基本方法是什么? 我到底在看什么,在屏幕上?哪个代码“是”背景?有什么东西可以设置背景颜色吗?如果没有,什么是简单且合适的“简单背景”(为了绘制背景颜色)。感谢您的帮助!
上面的代码生成一个带有白色文本的黑屏:
【问题讨论】:
Scaffold backgroundColor 属性是我认为最常用的方式。但是还有许多其他方法取决于您的情况。看看这个..4 Ways To Set Background Color In Flutter 【参考方案1】:按照 sirelon 的建议,像这样在主题中添加脚手架颜色,
theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFFEFEFEF)),
或者可以像这样为单个脚手架上色
Scaffold(
backgroundColor: Color(0xFFF1F1F1),
...
);
【讨论】:
【参考方案2】:你可以把六位十六进制放在 (0xFF**......**) 之后:
return Scaffold(
backgroundColor: const Color(0xFFE9ECEF),
.....) )
【讨论】:
【参考方案3】:示例代码:
import 'package:flutter/material.dart';
void main()
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Sample App'),
backgroundColor: Colors.amber, // changing Appbar back color
),
backgroundColor: Colors.blue, // changing body back color
),
),
);
【讨论】:
【参考方案4】:home: Scaffold(
backgroundColor: Color(
0xBF453F3F),
完成了:)
【讨论】:
【参考方案5】:您应该返回 Scaffold 小部件并将您的小部件添加到 Scaffold
就像这段代码一样:
import 'package:flutter/material.dart';
void main()
runApp(new MyApp());
class MyApp extends StatelessWidget
// This widget is the root of your application.
@override
Widget build(BuildContext context)
return Scaffold(
backgroundColor: Colors.white,
body: Center(child: new Text("Hello, World!"));
);
【讨论】:
【参考方案6】:Scaffold(
backgroundColor: Constants.defaulBackground,
body: new Container(
child: Center(yourtext)
)
)
【讨论】:
虽然此代码可能会解决问题,但您应该始终解释您的代码为何/如何工作。【参考方案7】:有很多方法,我在这里列出几个。
使用backgroundColor
Scaffold(
backgroundColor: Colors.black,
body: Center(...),
)
在SizedBox.expand
中使用Container
Scaffold(
body: SizedBox.expand(
child: Container(
color: Colors.black,
child: Center(...)
),
),
)
使用Theme
Theme(
data: Theme.of(context).copyWith(scaffoldBackgroundColor: Colors.black),
child: Scaffold(
body: Center(...),
),
)
【讨论】:
【参考方案8】:您可以一次将背景颜色设置为应用程序中的所有脚手架。
只需在 ThemeData 中设置 scaffoldBackgroundColor:
MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(scaffoldBackgroundColor: const Color(0xFFEFEFEF)),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
【讨论】:
这是所有页面(主要是脚手架)具有相同背景颜色的要求。谢谢。 很好的答案,特别是如果您使用路由和导航(比从 Skaffold 创建高阶小部件并在所有***小部件上使用它要好得多)。 对我来说是一个完美的答案,谢谢!【参考方案9】:关于 Flutter 的基本示例,您可以使用 Scaffold 的backgroundColor: Colors.X
进行设置
@override
Widget build(BuildContext context)
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
backgroundColor: Colors.blue,
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add_circle),
), // This trailing comma makes auto-formatting nicer for build methods.
);
【讨论】:
【参考方案10】:这是改变背景颜色的另一种方法:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return MaterialApp(home: Scaffold(backgroundColor: Colors.pink,),);
【讨论】:
【参考方案11】:我认为您也可以使用脚手架来制作白色背景。下面是一些可能有帮助的代码。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget
@override
Widget build(BuildContext context)
return new MaterialApp(
title: 'Testing',
home: new Scaffold(
//Here you can set what ever background color you need.
backgroundColor: Colors.white,
),
);
希望这会有所帮助?。
【讨论】:
我想为边框设置蓝色,为容器背景设置琥珀色,我该怎么做?【参考方案12】:我认为您需要使用MaterialApp
小部件并使用theme
并将primarySwatch
设置为您想要的颜色。如下代码,
import 'package:flutter/material.dart';
void main()
runApp(new MyApp());
class MyApp extends StatelessWidget
// This widget is the root of your application.
@override
Widget build(BuildContext context)
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
【讨论】:
【参考方案13】:这是我发现的一种方法。我不知道是否有更好的方法,或者取舍是什么。
Container“尽量做大”,根据https://flutter.io/layout/。此外,Container 可以采用decoration
,可以是BoxDecoration,也可以是color
(即背景色)。
这是一个确实用红色填充屏幕并显示“Hello, World!”的示例进入中心:
import 'package:flutter/material.dart';
void main()
runApp(new MyApp());
class MyApp extends StatelessWidget
// This widget is the root of your application.
@override
Widget build(BuildContext context)
return new Container(
decoration: new BoxDecoration(color: Colors.red),
child: new Center(
child: new Text("Hello, World!"),
),
);
注意,容器由 MyApp build() 返回。 Container 有一个装饰和一个子元素,即居中的文本。
在这里查看它的实际效果:
【讨论】:
如果您正在构建一个简单的应用程序或未使用 Material Design 的应用程序,容器是一个不错的选择。如果您正在构建一个 Material 应用程序,如果您想在所有画布和卡片上使用深色背景,请考虑使用 ThemeData.dark()。您还可以使用 ThemeData 构造函数的 cardColor 和 canvasColor 参数对卡片和画布背景颜色进行细粒度控制。 docs.flutter.io/flutter/material/ThemeData/ThemeData.html 如何设置自定义RGB? 我想为边框设置蓝色,为容器背景设置琥珀色,我该怎么做? 我没有使用 Scaffold,这个解决方案令人难以置信。谢谢。以上是关于如何在 Flutter 中设置主屏幕的背景颜色?的主要内容,如果未能解决你的问题,请参考以下文章