在Flutter中设置背景图片的高度、宽度、位置
Set background image height, width, position in Flutter
我的 SliverAppBar 中有一个背景图片。我已经尝试了 BoxFit.contain、BoxFit.fill...等,但其中 none 可以满足我的需求。
这是我能得到的:
但这就是我想要的:
我看到有 BoxFit.values 但我找不到任何说明如何使用它的文档(如果它是正确的?)
这是我的代码:
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:my_app/Theme.dart' as MyTheme;
import 'package:my_app/ui/rule_section_details/RuleRow.dart';
@override
class SliverHeaderTest extends StatelessWidget {
final DocumentSnapshot ruleGroup;
SliverHeaderTest(this.ruleGroup);
@override
Widget build(BuildContext context) {
return Material(
child: CustomScrollView(slivers: <Widget>[
SliverAppBar(
floating: true,
backgroundColor: Color(int.parse(ruleGroup['color'])),
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
// background: Image.asset('assets/img/circular-image.png',
// fit: BoxFit.contain),
background: new Image(
image: new AssetImage(ruleGroup['image']),
height: MyTheme.Dimens.ruleGroupListIconHeight,
width: MyTheme.Dimens.ruleGroupListIconWidth,
),
title: Text(ruleGroup['name'],
style: MyTheme.TextStyles.ruleSectionPageTitle),
centerTitle: true,
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.share),
tooltip: 'Share',
onPressed: () {/* ... */},
),
],
),
StreamBuilder(
stream: Firestore.instance
.collection('rules')
.where("section", isEqualTo: ruleGroup['id'])
.orderBy("subsection")
.orderBy("subsubsection")
.orderBy("subsubsubsection")
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return SliverList(
delegate: SliverChildListDelegate(
[
Container(
child: new Center(child: new Text('Loading...')),
)
],
),
);
}
return SliverPadding(
padding: EdgeInsets.only(top: 16.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return new RuleRow(snapshot.data.documents[index]);
}, childCount: snapshot.data.documents.length)));
})
]),
);
}
}
这是 background:
属性 或 FlexibleSpaceBar
的期望行为 - 它假设填充 Appbar
的所有背景区域,现在 title
这里不是要在背景下方呈现的单独元素,而是要显示在 background:
顶部的 FlexibleSpaceBar
的前景小部件
如果你真的需要在这里分开标题和图片你不能使用background
& title
属性,而是你需要使用 Column
或者ListView
而不是 FlexibleSpaceBar
.
您可以尝试使用以下代码和可能的选项:
推荐方案:
SliverAppBar(
backgroundColor: Colors.blue,
expandedHeight: 200.0,
floating: true,
// pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Row(
children: <Widget>[
Spacer(),
CircleAvatar(
radius: 54.0,
backgroundImage: NetworkImage(
"https://placeimg.com/640/480/animals",
),
),
Spacer(),
],
)),
),
这张图片是 radius: 68.0,
。
以下使用固定边距,可能会导致响应式设计出现问题,但仍然有效。
与ClipOval
:
SliverAppBar(
backgroundColor: Colors.blue,
expandedHeight: 200.0,
floating: true,
// pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Container(
margin:
EdgeInsets.symmetric(horizontal: 125.0, vertical: 50.0),
child: ClipOval(
child: Image.network(
"https://placeimg.com/640/480/animals",
),
),
)),
),
和CircleAvatar
SliverAppBar(
backgroundColor: Colors.blue,
expandedHeight: 200.0,
floating: true,
// pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Container(
margin:
EdgeInsets.symmetric(horizontal: 125.0, vertical: 50.0),
child: CircleAvatar(
radius: 30.0,
backgroundImage: NetworkImage(
"https://placeimg.com/640/480/animals",
),
),
)),
),
更新:
带有 ListView
选项。
注意:AppBar
高度由 expandedHeight:
属性 决定,在图像半径增加的情况下不会增加。
SliverAppBar(
backgroundColor: Colors.blue,
expandedHeight: 200.0,
floating: true,
// pinned: true,
flexibleSpace: Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Row(
children: <Widget>[
Spacer(),
CircleAvatar(
radius: 68.0,
backgroundImage: NetworkImage(
"https://placeimg.com/640/480/animals",
),
),
Spacer(),
],
),
Center(
child: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
)),
),
],
),
),
),
我的 SliverAppBar 中有一个背景图片。我已经尝试了 BoxFit.contain、BoxFit.fill...等,但其中 none 可以满足我的需求。
这是我能得到的:
但这就是我想要的:
我看到有 BoxFit.values 但我找不到任何说明如何使用它的文档(如果它是正确的?)
这是我的代码:
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:my_app/Theme.dart' as MyTheme;
import 'package:my_app/ui/rule_section_details/RuleRow.dart';
@override
class SliverHeaderTest extends StatelessWidget {
final DocumentSnapshot ruleGroup;
SliverHeaderTest(this.ruleGroup);
@override
Widget build(BuildContext context) {
return Material(
child: CustomScrollView(slivers: <Widget>[
SliverAppBar(
floating: true,
backgroundColor: Color(int.parse(ruleGroup['color'])),
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
// background: Image.asset('assets/img/circular-image.png',
// fit: BoxFit.contain),
background: new Image(
image: new AssetImage(ruleGroup['image']),
height: MyTheme.Dimens.ruleGroupListIconHeight,
width: MyTheme.Dimens.ruleGroupListIconWidth,
),
title: Text(ruleGroup['name'],
style: MyTheme.TextStyles.ruleSectionPageTitle),
centerTitle: true,
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.share),
tooltip: 'Share',
onPressed: () {/* ... */},
),
],
),
StreamBuilder(
stream: Firestore.instance
.collection('rules')
.where("section", isEqualTo: ruleGroup['id'])
.orderBy("subsection")
.orderBy("subsubsection")
.orderBy("subsubsubsection")
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return SliverList(
delegate: SliverChildListDelegate(
[
Container(
child: new Center(child: new Text('Loading...')),
)
],
),
);
}
return SliverPadding(
padding: EdgeInsets.only(top: 16.0),
sliver: SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return new RuleRow(snapshot.data.documents[index]);
}, childCount: snapshot.data.documents.length)));
})
]),
);
}
}
这是 background:
属性 或 FlexibleSpaceBar
的期望行为 - 它假设填充 Appbar
的所有背景区域,现在 title
这里不是要在背景下方呈现的单独元素,而是要显示在 background:
FlexibleSpaceBar
的前景小部件
如果你真的需要在这里分开标题和图片你不能使用background
& title
属性,而是你需要使用 Column
或者ListView
而不是 FlexibleSpaceBar
.
您可以尝试使用以下代码和可能的选项:
推荐方案:
SliverAppBar(
backgroundColor: Colors.blue,
expandedHeight: 200.0,
floating: true,
// pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Row(
children: <Widget>[
Spacer(),
CircleAvatar(
radius: 54.0,
backgroundImage: NetworkImage(
"https://placeimg.com/640/480/animals",
),
),
Spacer(),
],
)),
),
这张图片是 radius: 68.0,
。
以下使用固定边距,可能会导致响应式设计出现问题,但仍然有效。
与ClipOval
:
SliverAppBar(
backgroundColor: Colors.blue,
expandedHeight: 200.0,
floating: true,
// pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Container(
margin:
EdgeInsets.symmetric(horizontal: 125.0, vertical: 50.0),
child: ClipOval(
child: Image.network(
"https://placeimg.com/640/480/animals",
),
),
)),
),
和CircleAvatar
SliverAppBar(
backgroundColor: Colors.blue,
expandedHeight: 200.0,
floating: true,
// pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Container(
margin:
EdgeInsets.symmetric(horizontal: 125.0, vertical: 50.0),
child: CircleAvatar(
radius: 30.0,
backgroundImage: NetworkImage(
"https://placeimg.com/640/480/animals",
),
),
)),
),
更新:
带有 ListView
选项。
注意:AppBar
高度由 expandedHeight:
属性 决定,在图像半径增加的情况下不会增加。
SliverAppBar(
backgroundColor: Colors.blue,
expandedHeight: 200.0,
floating: true,
// pinned: true,
flexibleSpace: Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Row(
children: <Widget>[
Spacer(),
CircleAvatar(
radius: 68.0,
backgroundImage: NetworkImage(
"https://placeimg.com/640/480/animals",
),
),
Spacer(),
],
),
Center(
child: Text("Collapsing Toolbar",
style: TextStyle(
color: Colors.white,
fontSize: 22.0,
)),
),
],
),
),
),