Question

我想在应用栏下方添加一条线，如图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验证了我的问题

Answer 1

SliverAppBar小部件中有一个“底部”属性，该属性采用首选大小的小部件，您可以为其指定以下内容：

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

Answer 2

对omar hatem答案的贡献，属性“大小” 应该为“ preferredSize”

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

Answer 3

在我的情况下，我需要对应用程序条下方的行进行更多控制，因此最终实现如下：

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

干杯！

如何在SliverAppBar下颤动地创建一行？

3 个答案: