如何解决无法在 AppBar Flutter 中容纳图像和文本
我想将图像和文本放入应用栏,但似乎无法将我想要的所有内容放入应用栏中。
return DefaultTabController(
length: 2,child: Scaffold(
appBar: AppBar(
title:Column(
children: [
Container(
child: Image.asset(
'assets/vecteezy_circle-abstract_1191814.png',fit: BoxFit.scaleDown,height: 100,),Container(
padding: const EdgeInsets.only(top: 15),child: Text('Text'))
],bottom: TabBar(
tabs: [Tab(text: 'tab 1'),Tab(text: 'tab 2')],body: TabBarView(children: [
Text("o"),Text("kk"),]),));
}
我有这样的结果: https://i.stack.imgur.com/jzt4o.png
我该如何正确佩戴?所以它看起来像这样: https://i.stack.imgur.com/r0gum.png
解决方法
您需要将 CustomScrollView
与 SliverAppBar
一起使用
看看来自 Flutter Dev
的这个例子import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
final title = 'Floating App Bar';
return MaterialApp(
title: title,home: Scaffold(
// No appbar provided to the Scaffold,only a body with a
// CustomScrollView.
body: CustomScrollView(
slivers: <Widget>[
// Add the app bar to the CustomScrollView.
SliverAppBar(
// Provide a standard title.
title: Text(title),// Allows the user to reveal the app bar if they begin scrolling
// back up the list of items.
floating: true,// Display a placeholder widget to visualize the shrinking size.
flexibleSpace: Placeholder(),// Make the initial height of the SliverAppBar larger than normal.
expandedHeight: 200,),// Next,create a SliverList
SliverList(
// Use a delegate to build items as they're scrolled on screen.
delegate: SliverChildBuilderDelegate(
// The builder function returns a ListTile with a title that
// displays the index of the current item.
(context,index) => ListTile(title: Text('Item #$index')),// Builds 1000 ListTiles
childCount: 1000,],);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。