“Flutter Text Isn’t Displaying” 可以翻译为 “Flutter 文本未显示”。

huangapple
go评论70阅读模式
英文:

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 &#39;package:flutter/material.dart&#39;;
import &#39;package:workout_app/Screens/Components/Widgets/footer.dart&#39;;
class workout_page extends StatefulWidget {
@override
_WorkoutPageState createState() =&gt; _WorkoutPageState();
}
class _WorkoutPageState extends State&lt;workout_page&gt;
with TickerProviderStateMixin {
late TabController _tabController;
List&lt;Map&lt;String, dynamic&gt;&gt; workoutMap = [
{
&#39;name&#39;: &#39;My First Workout&#39;,
&#39;exercises&#39;: [
{
&#39;name&#39;: &#39;Bicep Curl&#39;,
&#39;musclesworked&#39;: [&#39;bicep&#39;, &#39;tricep&#39;]
},
{
&#39;name&#39;: &#39;Preacher Curl&#39;,
&#39;musclesworked&#39;: [&#39;bicep&#39;, &#39;tricep&#39;]
}
]
},
];
@override
void initState() {
super.initState();
_tabController = TabController(length: workoutMap.length + 1, vsync: this);
}
TextEditingController _newTabController = TextEditingController();
void _addTab() {
setState(() {
String newTabName = _newTabController.text;
Map&lt;String, dynamic&gt; newTab = {
&#39;name&#39;: newTabName,
&#39;exercises&#39;: [],
};
workoutMap.add(newTab);
_newTabController.clear();
_tabController = TabController(
length: workoutMap.length + (workoutMap.length &lt; 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 &lt; 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) =&gt; Tab(text: tab[&#39;name&#39;] as String)),
if (workoutMap.length &lt; 4)
Container(
width: 40,
height: 40,
alignment: Alignment.center,
child: IconButton(
icon: Icon(Icons.add),
onPressed: () {
showDialog(
context: context,
builder: (context) =&gt; AlertDialog(
title: Text(&#39;Add Tab&#39;),
content: TextField(
controller: _newTabController,
decoration: InputDecoration(
hintText: &#39;Enter tab name&#39;,
),
),
actions: [
TextButton(
child: Text(&#39;Cancel&#39;),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: Text(&#39;Add&#39;),
onPressed: () {
_addTab();
Navigator.pop(context);
},
),
],
),
);
},
),
),
],
),
])),
),
SliverToBoxAdapter(
child: Container(
height: size.height,
child: TabBarView(
physics: NeverScrollableScrollPhysics(),
controller: _tabController,
children: [
...workoutMap.map((tab) =&gt; **RIGHT HERE** Text(tab[&#39;name&#39;])),
if (workoutMap.length &lt; 4) Container(),
],
),
),
)
],
),
Footer(tab: &#39;Workout&#39;),
],
),
),
),
);
}
}

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 &lt; 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) =&gt;
Tab(text: tab[&#39;name&#39;] as String)),
],
),
),
//if (workoutMap.length &lt; 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) =&gt; AlertDialog(
title: const Text(&#39;Add Tab&#39;),
content: TextField(
controller: _newTabController,
decoration: const InputDecoration(
hintText: &#39;Enter tab name&#39;,
),
),
actions: [
TextButton(
child: const Text(&#39;Cancel&#39;),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: const Text(&#39;Add&#39;),
onPressed: () {
_addTab();
Navigator.pop(context);
},
),
],
),
);
},
),
),
],
),
],
),
),
),
SliverToBoxAdapter(
child: SizedBox(
height: size.height,
child: TabBarView(
physics: const NeverScrollableScrollPhysics(),
controller: _tabController,
children: [
...workoutMap.map((tab) =&gt; Text(tab[&#39;name&#39;])),
if (workoutMap.length &lt; 4) Container(),
],
),
),
)
],
),
Footer(tab: &#39;Workout&#39;),
],
),
),
),
);
}

huangapple
  • 本文由 发表于 2023年5月17日 06:36:10
  • 转载请务必保留本文链接：https://go.coder-hub.com/76267492.html
  • android
  • dart
  • flutter
  • ios
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定