gpt4 book ai didi

flutter - 我可以将TabBar中的标签向左而不是中心对齐吗?

转载 作者:行者123 更新时间:2023-12-03 03:38:36 27 4
gpt4 key购买 nike

我想做的是将标签向左对齐。我看过thisthis,但它们对我没有帮助。我也尝试过包括一列,这样我就可以使用交叉轴匹配,但是这给了我这种类型不匹配的问题“参数类型“列”不能分配给参数类型“PreferredSizeWidget”。我认为必须有一种简单的方法,但是我没有想法

child: Scaffold(
appBar: AppBar(
title: Text(advisoryService.number),
flexibleSpace: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[],
),
bottom: TabBar(
labelPadding: EdgeInsets.only(left: 8, right: 8),
isScrollable: true,
tabs: <Widget>[
Tab(
text: 'General',
),
Tab(
text: 'Financial',
),
Tab(
text: 'Experts & Participants',
),
],
),
),
body: TabBarView(

最佳答案

编辑:我已经更新了完整代码并正在演示
您可以使用Alignment.centerLeft
并使用Container控制整个TarBar大小,并将其设置为相对屏幕宽度

    appBar: AppBar(
title: Text(widget.title),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(20.0),
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: MediaQuery.of(context).size.width / 2,
child: TabBar(
isScrollable: true,
controller: _tabController,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
Tab(text: 'Tab 4'),
Tab(text: 'Tab 5'),
],
),
),
),
),
),

工作演示

enter image description here

完整的代码
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Tabs Demo';
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}

class MyHomePage extends StatefulWidget {
final String title;

const MyHomePage({Key key, this.title}) : super(key: key);

@override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}

class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
int _tabIndex = 0;

TabController _tabController;

@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 5);
}

void _toggleTab() {
_tabIndex = _tabController.index + 1;
_tabController.animateTo(_tabIndex);
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
notchMargin: 20,
child: new Row(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
InkWell(
onTap: () {
_toggleTab();
},
child: Text(
'Next >',
style: TextStyle(fontSize: 20, color: Colors.red),
),
)
],
),
),
appBar: AppBar(
title: Text(widget.title),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(20.0),
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: MediaQuery.of(context).size.width / 2,
child: TabBar(
isScrollable: true,
controller: _tabController,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
Tab(text: 'Tab 4'),
Tab(text: 'Tab 5'),
],
),
),
),
),
),
body: TabBarView(
controller: _tabController,
children: [
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.album),
title: Text('Hello 1'),
subtitle: Text('Click on Next Button to go to Tab 2.'),
),
],
),
),
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.album),
title: Text('Hello 2'),
subtitle: Text('Click on Next Button to go to Tab 3'),
),
],
),
),
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.album),
title: Text('Hello 3'),
subtitle: Text('The End'),
),
],
),
),
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.album),
title: Text('Hello 4'),
subtitle: Text('The End'),
),
],
),
),
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.album),
title: Text('Hello 5'),
subtitle: Text('The End'),
),
],
),
),
],
),
));
}
}

关于flutter - 我可以将TabBar中的标签向左而不是中心对齐吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58961617/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com