英文:
Flutter Text Isn't Displaying
问题
我正在尝试构建一个Flutter应用程序，但遇到了一个相当重要的问题。目前，我正在尝试创建一个带有TabView的锻炼屏幕，用户可以添加和删除选项卡。但是，锻炼名称未正确显示。以下是代码：
import 'package:flutter/material.dart';
import 'package:workout_app/Screens/Components/Widgets/footer.dart';
class WorkoutPage extends StatefulWidget {
@override
_WorkoutPageState createState() => _WorkoutPageState();
}
class _WorkoutPageState extends State<WorkoutPage> with TickerProviderStateMixin {
late TabController _tabController;
List<Map<String, dynamic>> workoutMap = [
{
'name': 'My First Workout',
'exercises': [
{
'name': 'Bicep Curl',
'musclesworked': ['bicep', 'tricep']
},
{
'name': 'Preacher Curl',
'musclesworked': ['bicep', 'tricep']
}
]
},
];
@override
void initState() {
super.initState();
_tabController = TabController(length: workoutMap.length + 1, vsync: this);
}
TextEditingController _newTabController = TextEditingController();
void _addTab() {
setState(() {
String newTabName = _newTabController.text;
Map<String, dynamic> newTab = {
'name': newTabName,
'exercises': [],
};
workoutMap.add(newTab);
_newTabController.clear();
_tabController = TabController(
length: workoutMap.length + (workoutMap.length < 4 ? 1 : 0),
vsync: this,
);
});
}
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Container(
decoration: BoxDecoration(color: Color.fromARGB(255, 67, 67, 67)),
child: DefaultTabController(
length: workoutMap.length + (workoutMap.length < 4 ? 1 : 0),
child: Scaffold(
backgroundColor: Color.fromRGBO(79, 79, 79, 1),
body: Stack(
children: [
CustomScrollView(
physics: NeverScrollableScrollPhysics(),
slivers: [
SliverAppBar(
expandedHeight: 30,
titleSpacing: 15,
pinned: true,
elevation: 0,
backgroundColor: Color.fromARGB(255, 19, 19, 19),
centerTitle: false,
bottom: PreferredSize(
preferredSize: const Size.fromHeight(0),
child: Column(children: [
TabBar(
physics: NeverScrollableScrollPhysics(),
tabs: [
...workoutMap.map(
(tab) => Tab(text: tab['name'] as String)),
if (workoutMap.length < 4)
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: IconButton(
icon: Icon(Icons.add),
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Add Tab'),
content: TextField(
controller: _newTabController,
decoration: InputDecoration(
hintText: 'Enter tab name',
),
),
actions: [
TextButton(
child: Text('Cancel'),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: Text('Add'),
onPressed: () {
_addTab();
Navigator.pop(context);
},
),
],
),
);
},
),
),
],
),
])),
),
SliverToBoxAdapter(
child: Container(
height: size.height,
child: TabBarView(
physics: NeverScrollableScrollPhysics(),
controller: _tabController,
children: [
...workoutMap.map((tab) => Text(tab['name'])),
if (workoutMap.length < 4) Container(),
],
),
),
)
],
),
Footer(tab: 'Workout'),
],
),
),
),
);
}
}
如果您有任何进一步的问题，请随时提出。
英文:
I am trying to build a flutter application, and have a pretty major issue. Currently, I am trying to make a workout screen with a tabView and the user can add and remove tabs. However, the workout name isn't being displayed correctly. Here is the code:
import 'package:flutter/material.dart';
import 'package:workout_app/Screens/Components/Widgets/footer.dart';
class workout_page extends StatefulWidget {
@override
_WorkoutPageState createState() => _WorkoutPageState();
}
class _WorkoutPageState extends State<workout_page>
with TickerProviderStateMixin {
late TabController _tabController;
List<Map<String, dynamic>> workoutMap = [
{
'name': 'My First Workout',
'exercises': [
{
'name': 'Bicep Curl',
'musclesworked': ['bicep', 'tricep']
},
{
'name': 'Preacher Curl',
'musclesworked': ['bicep', 'tricep']
}
]
},
];
@override
void initState() {
super.initState();
_tabController = TabController(length: workoutMap.length + 1, vsync: this);
}
TextEditingController _newTabController = TextEditingController();
void _addTab() {
setState(() {
String newTabName = _newTabController.text;
Map<String, dynamic> newTab = {
'name': newTabName,
'exercises': [],
};
workoutMap.add(newTab);
_newTabController.clear();
_tabController = TabController(
length: workoutMap.length + (workoutMap.length < 4 ? 1 : 0),
vsync: this,
);
});
}
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Container(
decoration: BoxDecoration(color: Color.fromARGB(255, 67, 67, 67)),
child: DefaultTabController(
length: workoutMap.length + (workoutMap.length < 4 ? 1 : 0),
child: Scaffold(
backgroundColor: Color.fromRGBO(79, 79, 79, 1),
body: Stack(
children: [
CustomScrollView(
physics: NeverScrollableScrollPhysics(),
slivers: [
SliverAppBar(
expandedHeight: 30,
titleSpacing: 15,
pinned: true,
elevation: 0,
backgroundColor: Color.fromARGB(255, 19, 19, 19),
centerTitle: false,
bottom: PreferredSize(
preferredSize: const Size.fromHeight(0),
child: Column(children: [
TabBar(
physics: NeverScrollableScrollPhysics(),
tabs: [
...workoutMap.map(
(tab) => Tab(text: tab['name'] as String)),
if (workoutMap.length < 4)
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: IconButton(
icon: Icon(Icons.add),
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Add Tab'),
content: TextField(
controller: _newTabController,
decoration: InputDecoration(
hintText: 'Enter tab name',
),
),
actions: [
TextButton(
child: Text('Cancel'),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: Text('Add'),
onPressed: () {
_addTab();
Navigator.pop(context);
},
),
],
),
);
},
),
),
],
),
])),
),
SliverToBoxAdapter(
child: Container(
height: size.height,
child: TabBarView(
physics: NeverScrollableScrollPhysics(),
controller: _tabController,
children: [
...workoutMap.map((tab) => **RIGHT HERE** Text(tab['name'])),
if (workoutMap.length < 4) Container(),
],
),
),
)
],
),
Footer(tab: 'Workout'),
],
),
),
),
);
}
}
I have to add this part in order to post this question - Thank you so much in advance!
答案1
得分: 0
尝试将 isScrollable 属性添加到 TabBar 小部件中。
这将自动调整宽度，并在添加更多选项卡时使其可滚动。
isScrollable: true,
更新
这是一个修改后的构建函数。
希望这有所帮助。
建议在需要的地方使用 const，这可以提高应用程序性能。
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Container(
decoration: const BoxDecoration(color: Color.fromARGB(255, 67, 67, 67)),
child: DefaultTabController(
length: workoutMap.length + (workoutMap.length < 4 ? 1 : 0),
child: Scaffold(
backgroundColor: const Color.fromRGBO(79, 79, 79, 1),
body: Stack(
children: [
CustomScrollView(
physics: const NeverScrollableScrollPhysics(),
slivers: [
SliverAppBar(
expandedHeight: 30,
titleSpacing: 15,
pinned: true,
elevation: 0,
backgroundColor: const Color.fromARGB(255, 19, 19, 19),
centerTitle: false,
bottom: PreferredSize(
preferredSize: const Size.fromHeight(0),
child: Column(
children: [
Row(
children: [
Expanded(
child: TabBar(
isScrollable: true,
physics: const NeverScrollableScrollPhysics(),
tabs: [
...workoutMap.map((tab) =>
Tab(text: tab['name'] as String)),
],
),
),
//if (workoutMap.length < 4)
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: IconButton(
icon: const Icon(
Icons.add,
color: Colors.white,
),
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('Add Tab'),
content: TextField(
controller: _newTabController,
decoration: const InputDecoration(
hintText: 'Enter tab name',
),
),
actions: [
TextButton(
child: const Text('Cancel'),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: const Text('Add'),
onPressed: () {
_addTab();
Navigator.pop(context);
},
),
],
),
);
},
),
),
],
),
],
),
),
),
SliverToBoxAdapter(
child: SizedBox(
height: size.height,
child: TabBarView(
physics: const NeverScrollableScrollPhysics(),
controller: _tabController,
children: [
...workoutMap.map((tab) => Text(tab['name'])),
if (workoutMap.length < 4) Container(),
],
),
),
)
],
),
Footer(tab: 'Workout'),
],
),
),
),
);
}
如果您需要任何进一步的翻译，请告诉我。
英文:
Try adding isScrollable property to TabBar widget.
This will auto adjust the width and make it scrollable if you keep on adding more tabs
isScrollable: true,
UPDATE
Here is a modified build function.
Hope this helps.
On a suggestive note, use const wherever required, this improves app performance.
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Container(
decoration: const BoxDecoration(color: Color.fromARGB(255, 67, 67, 67)),
child: DefaultTabController(
length: workoutMap.length + (workoutMap.length < 4 ? 1 : 0),
child: Scaffold(
backgroundColor: const Color.fromRGBO(79, 79, 79, 1),
body: Stack(
children: [
CustomScrollView(
physics: const NeverScrollableScrollPhysics(),
slivers: [
SliverAppBar(
expandedHeight: 30,
titleSpacing: 15,
pinned: true,
elevation: 0,
backgroundColor: const Color.fromARGB(255, 19, 19, 19),
centerTitle: false,
bottom: PreferredSize(
preferredSize: const Size.fromHeight(0),
child: Column(
children: [
Row(
children: [
Expanded(
child: TabBar(
isScrollable: true,
physics: const NeverScrollableScrollPhysics(),
tabs: [
...workoutMap.map((tab) =>
Tab(text: tab['name'] as String)),
],
),
),
//if (workoutMap.length < 4)
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: IconButton(
icon: const Icon(
Icons.add,
color: Colors.white,
),
onPressed: () {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('Add Tab'),
content: TextField(
controller: _newTabController,
decoration: const InputDecoration(
hintText: 'Enter tab name',
),
),
actions: [
TextButton(
child: const Text('Cancel'),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: const Text('Add'),
onPressed: () {
_addTab();
Navigator.pop(context);
},
),
],
),
);
},
),
),
],
),
],
),
),
),
SliverToBoxAdapter(
child: SizedBox(
height: size.height,
child: TabBarView(
physics: const NeverScrollableScrollPhysics(),
controller: _tabController,
children: [
...workoutMap.map((tab) => Text(tab['name'])),
if (workoutMap.length < 4) Container(),
],
),
),
)
],
),
Footer(tab: 'Workout'),
],
),
),
),
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论