Flutter的SliverAppBar配置问题

coderli

新人小白求助：配置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(),
        )
      ),
    );
  }
}

米饭大师

加padding 试了没

coderli

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

SliverAppBar没有padding这个属性

米饭大师

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

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

coderli

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

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