如何在颤动的 SliverAppBar 下创建一条线？答案

【问题标题】：How can I create a line under the SliverAppBar in flutter?如何在颤动的 SliverAppBar 下创建一条线？
【发布时间】：2020-10-03 20:09:48
【问题描述】：

我想在 appbar 下添加一行，如图 2 所示。
我怎样才能使这条线颤动？
图一是现在的应用，图二是 sliverAppBar 下的线 *已经尝试过使用容器和分隔符

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            leading: IconButton(
              icon: SvgPicture.asset(
                'assets/icons/home_icon.svg',
                color: Colors.black,
              ),
              onPressed: () {}
            ),
            actions: [
              IconButton(
                icon: SvgPicture.asset(
                  'assets/icons/search_icon.svg',
                  color: Colors.black,
                ),
                onPressed: () {
                }
              ),
              IconButton(
                icon: SvgPicture.asset(
                  'assets/icons/shopping_bag_icon.svg',
                  color: Colors.black,
                ),
                onPressed: () {},
              ),
              IconButton(
                icon: SvgPicture.asset(
                  'assets/icons/profile_icon.svg',
                  color: Colors.black,
                ),
                onPressed: () {}
              ),
            ],
            floating: true,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text('Item #$index')),
              childCount: 1000,
            ),
          ),
        ],
      ),
    );
  }
}

堆栈的更多 txt 有效我的问题

【问题讨论】：

标签： flutter dart

【解决方案1】：

SliverAppBar Widget 中有一个 'bottom' 属性，它采用首选大小的 Widget，您可以给它以下内容：

bottom: PreferredSize(
        preferredSize: Size(double.infinity, 5),
        child: Divider(color: Colors.black),
),

【讨论】：

【解决方案2】：

对 omar hatem 答案的贡献，属性 "size" 应该是 "preferredSize"

bottom: PreferredSize(
                    preferredSize: Size(double.infinity, 5),
                    child: Divider(color: Colors.black),
                  ),

【讨论】：

【解决方案3】：

就我而言，我需要对应用栏条下的线路进行更多控制，所以我最终像这样实施：

SliverPersistentHeader(
  pinned: true,
  delegate: MySliverElevationDelegate(
    child: Material(
      //elevation: 4.0,
      child: Container(
        color: Colors.black,
      ),
    ),
  ),
)

干杯！

【讨论】：