在Flutter中设置背景图像的高度,宽度,位置

时间:2019-01-27 03:27:10

标签: flutter flutter-layout flutter-sliver

我的SliverAppBar中有一个背景图像。我已经尝试过BoxFit.contain,BoxFit.fill ...等,但是它们都不适合我想做的事。

这是我可以得到的:

not good

但这是我想要的:

good!

我看到有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)));
            })
      ]),
    );
  }
}

1 个答案:

答案 0 :(得分:1)

这是background:的{​​{1}}属性的期望行为-假设它填充了FlexibleSpaceBar的所有背景区域,现在Appbar不再是单独的元素呈现在背景之下,但title的前景小部件显示在FlexibleSpaceBar

如果您确实需要在此处分隔标题和图片,则不能使用background:background属性,而需要使用titleColumnListView

您可以尝试以下带有可能选项的代码:

推荐的解决方案:

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(), ], )), ),

enter image description here

以下使用固定边距,可能会在响应式设计中引起问题,但仍然有效。

使用radius: 68.0,

ClipOval

enter image description here

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

enter image description here

更新

带有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: