Flutter的SliverAppBar配置问题

coderli 发表于 2024-5-23 19:51

新人小白求助：配置title的时候，actions和左边的title布局之间空隙如何调整，

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
const Home({super.key});

@override
State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> with TickerProviderStateMixin{
late TabController tabController;
// 顶部导航栏
List topTabBar = ["推荐",'大前端','推荐','动态','后端','移动开发','移动端','程序人生'];
@override
void initState() {
super.initState();
tabController = TabController(length: topTabBar.length, vsync: this);
}
@override
Widget build(BuildContext context) {
return Scaffold(
   body: NestedScrollView(
   headerSliverBuilder: (BuildContext context,bool flag){
      return [
         SliverAppBar(
         pinned: true, // 配置SliverAppBar是否固定
         floating: true, // 是否随着滑动隐藏标题
         title: Material(
            color: Colors.grey,
            borderRadius: const BorderRadius.all(Radius.circular(6)),
            child: Ink(
               // decoration: const BoxDecoration(
               // color: Colors.grey,
               // borderRadius: BorderRadius.all(Radius.circular(6))
               // ),
               child: InkWell(
               onTap: (){
                  print('点击了搜索框');
               },
               borderRadius: const BorderRadius.all(Radius.circular(6)),
               splashColor: Colors.pinkAccent,
               child: Container(
                  height: 33,
                  child: const Row(
                     children: [
                     SizedBox(
                        width: 12,
                     ),
                     Icon(
                        Icons.search,
                        color: Colors.white,
                        size: 18,
                     ),
                     SizedBox(width: 6),
                     Text(
                        '搜索文章/帖子/用户',
                        style: TextStyle(
                           fontSize: 14,
                           color: Colors.white
                        ),
                     )
                     ],
                  ),
               ),
               ),
            ),
         ),
         actions: [
            IconButton(
               icon: const Icon(Icons.add_circle),
               onPressed: (){
               print('点击了添加按钮');
               },
            )
         ],
         // TabBar 标签栏
         bottom: TabBar(
            // 设置tabBar从最左侧开始，消除第一个左边的空隙
            tabAlignment: TabAlignment.start,
            // 设置标签栏的标签是否可以滚动
            isScrollable: true,
            // 控制器
            controller: tabController,
            tabs: topTabBar.map((item) => Tab(text:item)).toList(),
         ),
         )
      ];
   },
   body: TabBarView(
      controller: tabController,
      children: topTabBar.map((item)=>Container(height:3000,child: Text('$item'),)).toList(),
   )
   ),
);
}
}

米饭大师 发表于 2024-5-23 20:31

加padding 试了没

coderli 发表于 2024-5-24 11:44

米饭大师发表于 2024-5-23 20:31
加padding 试了没

SliverAppBar没有padding这个属性

米饭大师 发表于 2024-5-24 11:54

coderli 发表于 2024-5-24 11:44
SliverAppBar没有padding这个属性

用定位重写appbar 这样就可以用了

coderli 发表于 2024-5-24 13:55

米饭大师发表于 2024-5-24 11:54
用定位重写appbar 这样就可以用了

用了titleSpacing和leadingWidth配合leading设置成功了

页: [1]

吾爱破解 - 52pojie.cn's Archiver

Flutter的SliverAppBar配置问题