3

下のスクリーンショットでわかるコンセプトに取り組んでいます。

デザインのコンセプト

注: 矢印は UI の一部ではありませんが、ドラッグ可能な機能を示すために追加されました。

画面には、場所のタイトルを表示する SliverAppBar、場所の説明を含む Sliver 本体、および DraggableScrollableSheet (または同様の代替手段) があります。場所の説明を上にスクロールすると、タイトルが折りたたまれます。DraggableScrollableSheet を上にスクロールすると、画面の高さいっぱいまで拡大されます。

何度もまとめようとしましたが、いつも何かがずれています。私の最後の試みは、DraggableScrollableSheet を「ボトムシート:」として Scaffold に追加することでした。BottomAppBar があるため、UI が壊れ、次のようになります。

現在の UI の動作

足場

@override
Widget build(BuildContext context) {
 return Scaffold(
     body: body,
     extendBody: true,
     appBar: appBar,
     bottomSheet: hasBottomSheet
         ? DraggableScrollableSheet(
             builder:
                 (BuildContext context, ScrollController scrollController) {
               return Container(
                 color: Colors.blue[100],
                 child: ListView.builder(
                   controller: scrollController,
                   itemCount: 25,
                   itemBuilder: (BuildContext context, int index) {
                     return ListTile(title: Text('Item $index'));
                   },
                 ),
               );
             },
           )
         : null,
     backgroundColor: Colors.white,
     floatingActionButtonLocation: fab_position,
     floatingActionButton: hasActionButton ? ScannerFAB() : null,
     bottomNavigationBar: AppBarsNav(hasNavButtons: hasNavButtons));
}

足場本体

class LocationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScaffoldWithNav(
      hasBottomSheet: true,
      body: CustomScrollView(
        slivers: <Widget>[
          SliverBar(
              title: "Location",
              hasBackground: true,
              backgroundImagePath: 'assets/testImage.jpg'),
          SliverToBoxAdapter(
            child: Text("very long text "),
          ),
          SliverPadding(
            padding: EdgeInsets.only(bottom: 70),
          ),
        ],
      ),
    );
  }
}

BottomAppBar FAB

class ScannerFAB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: WebsafeSvg.asset('assets/qr-code.svg',
          color: Colors.white, height: 24, width: 24),
    );
  }
}

FAB がジャンプし、コンテンツが隠されます。固定サイズのコンテナーを設定すると、コンテンツは戻ってきますが、FAB はまだ独自の生活を送っています :)

現在の UI 動作2

誰かがこの問題/それらの問題を解決する方法を知っている場合は、共有してください。とても感謝しています!

4

2 に答える 2

0

たとえば、次のように Stack into Body を使用できます。

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
     children. [
      SingleChildScrollView(),
      DraggableScrollableSheet(),
     ]
    ),
    ...        
    floatingActionButton: ... // keep FAB here
    ...

  )

于 2021-06-04T21:44:30.247 に答える