个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
28
4
到目前为止，我已经使用 CustomScrollView 和 Sticky Header 制作了这个布局
我想要实现的是，选项卡下方的内容不应滚动，除非有额外的内容可用。此外，滚动后，内容不应位于粘性标题后面。
到目前为止我的代码。
Scaffold(
backgroundColor: Colors.white,
extendBodyBehindAppBar: true,
appBar: AppBar(
toolbarHeight: getHeight() * (1 / 11),
),
body: Padding(
padding: getPaddings(),
child: DefaultTabController(
length: 3,
child: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Container(
height: getHeight() * (3 / 11),
color: Colors.blue,
),
),
SliverStickyHeader(
header: Column(
children: [
Container(
height: getHeight() * (1 / 11),
width: double.infinity,
color: kPrimaryColor,
child: Center(
child: Text(
"TEXT",
style: TextStyle(
fontSize: 32,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
Container(
height: getHeight() * (1 / 11),
color: kPrimaryColor,
child: TabBar(
tabs: [
Tab(
child: Text(
'TITLE1',
style: TextStyle(color: Colors.black),
),
),
Tab(
child: Text(
'TITLE2',
style: TextStyle(color: Colors.black),
),
),
Tab(
child: Text(
'TITLE3',
style: TextStyle(color: Colors.black),
),
),
],
),
),
],
),
sliver: SliverFillRemaining(
child: TabBarView(
children: [
Padding(
padding: EdgeInsets.symmetric(
horizontal: getProportionateScreenWidth(50),
vertical: getProportionateScreenHeight(20)),
child: Column(
children: [
RoundedPicture(),
FittedBox(
child: Text("Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 40)),
),
SizedBox(
height: getProportionateScreenHeight(20),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info1: ',
children: [
TextSpan(
text: "123",
style: TextStyle(
color: kSecondaryColor,
),
),
]),
),
SizedBox(
height: getProportionateScreenHeight(20),
),
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info2: ',
children: [
TextSpan(
text: "abcd",
style: TextStyle(
color: kSecondaryColor,
),
),
]),
),
SizedBox(
height: getProportionateScreenHeight(20),
),
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info3: ',
children: [
TextSpan(
text: "xyz",
style: TextStyle(
color: kSecondaryColor,
),
),
]),
),
],
),
],
),
),
Center(
child: Text("TITLE2"),
),
Center(
child: Text("TITLE3"),
),
],
),
),
),
],
),
),
),
为了实现所需的布局，我尝试在不同的条子内使用 TabBarView，即 SliverList 和 SliverToBoxAdapter，但它们都导致了错误，因为 TabBarView 没有预定义的高度。
最佳答案
这是我的实现。
因为没有size相关的方法，所以我自己定了一个值。
默认选项卡 Controller
SliverAppBar
SliverPersistentHeader
SliverPersistentHeader
标签栏 View
容器//后退按钮
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(initialIndex: 0, length: 3, vsync: this);
}
double getHeight() {
return 800;
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
extendBodyBehindAppBar: true,
body: SafeArea(
child: Stack(
children: [
DefaultTabController(
length: 3,
child: NestedScrollView(
headerSliverBuilder: (context, value) {
return [
SliverAppBar(
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(),
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 90,
maxHeight: 90,
child: Container(
height: getHeight() * (1 / 11),
width: double.infinity,
color: Colors.green[200],
child: Center(
child: Text(
"TEXT",
style: TextStyle(
fontSize: 32,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverAppBarDelegate(
minHeight: 90,
maxHeight: 90,
child: Container(
color: Colors.green[200],
child: TabBar(
controller: _tabController,
tabs: [
Tab(
child: Text(
'TITLE1',
style: TextStyle(
color: Colors.black,
),
),
),
Tab(
child: Text(
'TITLE2',
style: TextStyle(color: Colors.black),
),
),
Tab(
child: Text(
'TITLE3',
style: TextStyle(color: Colors.black),
),
),
],
),
),
),
),
];
},
body: TabBarView(
controller: _tabController,
children: [
SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(bottom: 600),
child: Column(
children: [
// RoundedPicture(),
Icon(
Icons.favorite,
color: Colors.pink,
size: 150.0,
semanticLabel:
'Text to announce in accessibility modes',
),
FittedBox(
child: Text("Hello World",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 40)),
),
SizedBox(
height: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info1: ',
children: [
TextSpan(
text: "123",
style: TextStyle(),
),
]),
),
SizedBox(
height: 20,
),
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info2: ',
children: [
TextSpan(
text: "abcd",
style: TextStyle(),
),
]),
),
SizedBox(
height: 20,
),
RichText(
text: TextSpan(
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20),
text: 'Info3: ',
children: [
TextSpan(
text: "xyz",
style: TextStyle(),
),
]),
),
],
),
],
),
),
),
SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(bottom: 600),
child: Column(
children: [
Container(
padding: EdgeInsets.only(bottom: 600),
child: Center(
child: Text("TITLE2"),
),
),
],
),
),
),
SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(bottom: 600),
child: Column(
children: [
Container(
padding: EdgeInsets.only(bottom: 600),
child: Center(
child: Text("TITLE3"),
),
),
],
),
),
),
],
),
),
),
Container(
height: 90,
padding: EdgeInsets.symmetric(horizontal: 15),
child: InkWell(
onTap: () {},
child: Icon(Icons.arrow_back),
),
),
],
),
),
);
}
}
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate({
@required this.minHeight,
@required this.maxHeight,
@required this.child,
});
final double minHeight;
final double maxHeight;
final Widget child;
@override
double get minExtent => minHeight;
@override
double get maxExtent => math.max(maxHeight, minHeight);
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return SizedBox.expand(child: child);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
关于flutter - 带有 StickyHeader 的 Sliver 内部的 TabBarView，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68640078/
28
4
0
我一直在尝试使用标签更改应用栏标题的许多解决方案，我解决了它，但现在有一个小问题；按下选项卡时，应用栏会随选项卡而变化，但不会随选项卡 View 而变化。在选项卡栏 View 上向左或向右滑动会更改选
我使用 TabBarView 并且我注意到一些非常奇怪的事情。我在所有选项卡的小部件中放置了一些打印消息，以便在滑动选项卡时获得反馈。我得到了这些结果: 从 0 -> 1:选项卡 1 调用，选项卡 3
这是我的布局结构 这是主界面 ListView( children: [ _buildCarousel(), _buildHomeTabBar(), ], ) 这是 HomeT
如何为未选中的标签添加下划线，如下所示: https://ibb.co/mfkzKp 在这里您可以看到未选中的选项卡为灰色，选中的选项卡为蓝色。 最佳答案 我在文档中没有找到任何关于如何自定义禁用指标
我需要在 Flutter 中实现如下布局。 当用户滚动时，我希望整个布局滚动(隐藏标题和标签栏)。但是，我不能将 TabBarView 嵌套在 ListView 中，因为 TabBarView 没有限
我在 SingleChildScrollView 中创建了 TabBar。问题是我想用我的整个应用程序在 TabBarView 中创建可滚动的内容，而不是仅在 TabBarView 中滚动内容。我尝试
我想在我的 flutter 页面中添加一些标签，但没有一个只有标签的页面。 简而言之，我有一些输入字段，在它们下面我想放置我的标签。 我不断收到此错误:TabBarView 没有 TabControl
我想构建一个 UI，其中我在屏幕顶部有一些固定的小部件(在所有选项卡上可见)，然后在它们下面我想要一个 TabBarView(底部有选项卡栏)，这是否可能而不使您的自己的标签小部件还是 TabBarV
我的 Flutter 应用有 3 个标签页。当应用程序加载时，我希望它加载所有 3 个页面，而不仅仅是它将显示的页面。我的问题是，当滑动到我的其他选项卡时，加载内容需要一秒钟，然后它会显示动画。为这种
想要在 flutter 中克隆 playstore 首页应用栏滚动功能。 Playstore Appbar我正在尝试在 SliverAppBar 底部属性下制作一个包含静态选项卡的屏幕。每当我单击任何
我有一个包含项目列表的 TabBarView，我为每个项目分配了一个 Navigator.push 方法。目前该方法会跳转到新页面。 我的问题是，是否可以导航到 TabBarView 主体内的新页面？
Flutter 的新手，不知道如何在我的 UI 上设置大小限制，以免溢出。尝试使用选项卡制作一些不同的 UI，我在选项卡栏上方有一些组件。基本上我想要这样的东西: ------------------
我想使用 TabBar 和 BottomNavigationBar 来控制相同的 TabBarView，其主体是自定义小部件 RankingTable 的列表(仅在演示中放置一个并使用文本小部件作为第
TabBar 小部件有一个 onTap() 回调，允许检测用户何时刚刚按下了一个选项卡。这很有用，我们可以准备新的 tabView 来显示一些动态数据。 TabBar 小部件还有一个拖动功能，允许更改
我的 tabBar 有一个 StatelessWidget 小部件，其中包含 2 个 statefulWidget。问题是，当单击管理器以查看我的所有选项卡时(默认情况下登陆我的第一个选项卡)，tab
我用 DefaultTabController 实现了一个基本的 TabBar 和 TabBarView，见下面的代码。 class MyApp2 extends StatelessWidget {
我有下面的代码来让 TabBarView 与条子效果一起工作。问题是当用户滚动到末尾时我需要加载更多数据。但是每次向下滚动时，_handleScrolling 函数都不会被触发。我必须再次上下滚动才能
我的问题是我想要一个 TabBarView 在 SingleChildScrollView 但它给了我这个错误:RenderFlex child 有非零弹性，但传入的高度约束是无界的。 如果我删除 S
我正在开发一个 flutter 应用程序。我有一个有六个 child 的底部栏。其中两个是 TabBar 屏幕，但我对它们有疑问。每当我在 TabBar/TabBarView 中更改选定的选项卡并移动
Check video for more clearifacation gitlab link 我的代码 import 'package:flutter/material.dart'; import
我是一名优秀的程序员,十分优秀！