我正在尝试将Sliver AppBar的标题居中,并在此下方添加第二个文本。我做不到。
下面是现在的图像以及应该如何显示。
谁能帮我?
这是我的代码。
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Slive AppBar', theme: new ThemeData( primarySwatch: Colors.blue, ), debugShowCheckedModeBanner: false, home: new MyHomePage(title: 'Slive AppBar'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State{ @override Widget build(BuildContext context) { return new Scaffold( drawer: new Drawer(), body: new CustomScrollView( scrollDirection: Axis.vertical, slivers: [ new SliverAppBar( expandedHeight: 150.0, flexibleSpace: const FlexibleSpaceBar( title: const Text("US\$ 123.456.78"), centerTitle: true, ), backgroundColor: Colors.redAccent, pinned: true, actions: [ new IconButton( icon: const Icon(Icons.add_circle), tooltip: 'Balance', onPressed: () {/* ... */}, ), ], ), ], )); } }
“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“” “”“”“”
您可以Column
根据children
需要创建一个小部件:
return new Scaffold( drawer: new Drawer(), body: new CustomScrollView( scrollDirection: Axis.vertical, slivers:[ new SliverAppBar( expandedHeight: 140.0, flexibleSpace: FlexibleSpaceBar( title: Column( crossAxisAlignment: CrossAxisAlignment.stretch, mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ const Text("US\$ 123.456.78", textAlign: TextAlign.center,), const Text("Anything", style: TextStyle(fontSize: 12.0),textAlign: TextAlign.center,), ], ), centerTitle: true, ), backgroundColor: Colors.redAccent, pinned: true, actions: [ new IconButton( icon: const Icon(Icons.add_circle), tooltip: 'Balance', onPressed: () {/* ... */}, ), ], ), ], ));