【发布时间】：2021-04-10 01:26:41
【问题描述】：
#1。我正在使用 tabcontroller 制作选项卡菜单，我想停止它的选项卡滚动功能，并想使用选项卡菜单单击来选择选项卡。
我正在尝试物理：NeverScrollableScrollPhysics()，但失败了。 作为一个新手，我不明白是什么问题或我缺少什么！
这是一个 GIF 文件来说明我的场景 --> here
#2。在这个场景中，“Places”意味着第一个选项卡保持一个填充，我怎样才能删除它并将它推到左边，从身体开始的地方？
在此先感谢 :)
我的代码-->
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'dart:math' as math;
void main() => runApp(StartPage());
class StartPage extends StatelessWidget {
static const String _title = 'TravelApp';
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: _title,
home: Scaffold(body: StartPage1()),
);
}
}
class StartPage1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
dynamic screenHeight = MediaQuery.of(context).size.height;
dynamic screenwidth = MediaQuery.of(context).size.width;
return Scaffold(
body: Container(
height: screenHeight,
width: screenwidth,
padding: EdgeInsets.symmetric(
horizontal: screenwidth * 0.03,
vertical: screenHeight * 0.02,
),
child: Container(
// Places BAr
height: screenHeight * 0.20,
child: MaterialApp(
debugShowCheckedModeBanner: false,
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(screenHeight * 0.076607387),
child: new Container(
child: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: Container(),
),
Container(
height: screenHeight * 0.05,
margin: EdgeInsets.fromLTRB(
0,
0,
0,
screenHeight * 0.02,
),
alignment: Alignment.centerLeft,
child: TabBar(
indicator: CircleTabIndicator(
color: Color(0xFF7675E0),
radius: 4,
),
isScrollable: true,
labelColor: Color(0xFF7675E0),
unselectedLabelColor: Colors.grey,
physics: NeverScrollableScrollPhysics(),
tabs: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
"Placess",
style: GoogleFonts.sniglet(),
),
),
Tab(
child: Text(
"Activities",
style: GoogleFonts.sniglet(),
),
),
Tab(
child: Text(
"Hotels",
style: GoogleFonts.sniglet(),
),
),
],
),
)
],
),
),
),
),
body: TabBarView(
children: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
9,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1002.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"Mountain",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
9,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1017.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"Beach",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
9,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1013.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"Location",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
screenHeight * 0.012311902,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1002.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"More",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
],
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
9,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1004.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"Mountain",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
9,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1013.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"Beach",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
9,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1017.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"Location",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
9,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1004.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"More",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
],
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
9,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1002.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"Mountain",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
9,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1013.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"Beach",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
9,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1017.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"Location",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
Container(
width: screenwidth * 0.18,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(
0,
0,
0,
9,
),
child: ClipOval(
child: Material(
child: InkWell(
splashColor: Color(0xFF7675E0),
child: SizedBox(
width: screenwidth * 0.136253041,
height: screenHeight * 0.076607387,
child: Image(
image:
AssetImage('assets/1004.png'),
),
),
onTap: () {},
),
),
),
),
Text(
"More",
style: GoogleFonts.sniglet(
color: Colors.black45,
),
),
],
),
),
],
),
),
],
),
),
),
),
),
),
);
}
}
【问题讨论】：
-
你为什么有
isScrollable: true？ -
@DimaRostopira 对齐它们，如果选项卡名称超过限制，它将隐藏它们，不会破坏它们！