如何解决Flutter 应用栏布局:操作按钮与标签栏在同一行?
假设我想创建一个应用栏,在开始和结束时带有两个操作按钮,同时在中间有一个标签栏,它们都在同一行中。这是我用来使标签栏工作的代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
highlightColor: Colors.transparent,splashColor: Colors.transparent,hoverColor: Colors.transparent,),title: 'Flutter Demo',home: DefaultTabController(
length: 2,child: Scaffold(
appBar: AppBar(
leading: Icon(
Icons.menu,automaticallyImplyLeading: false,backgroundColor: Colors.white,flexibleSpace: new Column(
mainAxisAlignment: MainAxisAlignment.end,children: [
TabBar(
indicatorColor: Colors.pink[100],tabs: [
Tab(text: 'Dogs'),Tab(text: 'Cats'),],labelColor: Colors.black,//tabbar
],//chilren on Tabbar
),//new Column
),//appbar
body: TabBarView(
children: [
Center(child: Text('DOGS')),Center(child: Text('CATS')),);
}
}
但是如何添加两个操作按钮而不让标签栏覆盖它们?也许使用网格?
解决方法
尝试将标签栏放在标题中:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
highlightColor: Colors.transparent,splashColor: Colors.transparent,hoverColor: Colors.transparent,),title: 'Flutter Demo',home: DefaultTabController(
length: 2,child: Scaffold(
appBar: AppBar(
leading: Icon(
Icons.menu,color: Colors.black,actions: [
Icon(
Icons.settings,],automaticallyImplyLeading: false,backgroundColor: Colors.white,title: Padding(
padding: EdgeInsets.only(left: 50,right: 50),child:TabBar(
indicatorColor: Colors.pink[100],tabs: [
Tab(text: 'Dogs'),Tab(text: 'Cats'),labelColor: Colors.black,//appbar
body: TabBarView(
children: [
Center(child: Text('DOGS')),Center(child: Text('CATS')),);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。