ListView.builderで使用する拡張ウィジェットの代替手段

Nov 28 2020

選択したボタンに応じて異なるウィジェット(selectedWidget)を表示する画面を設計する必要があります。問題は、コンテンツが動的であり、すべてのAPIにListView.builderを使用する必要があることです。また、ListView.builderは、listviewを含む行がExpandedウィジェットでラップされている場合にのみ機能します。ListViewのすぐ下に2つのボタンが必要ですが、ListViewが存在する列全体をカバーするExpandedウィジェットが原因で実現できません。

これが私が必要としているデザインです。

コードは私が使用している基本的な構造を与えます。selectedWidgetは、選択したFlatButtonに従って選択されるListView.builderウィジェットです。また、selectedWidgetを含む列には動的な高さがあります。リストビューのサイズに応じて調整する必要があるため、固定の高さやmaxHeightを定義することはできません。ここではminHeightしか指定できません。また、ListViewの下にある2つのボタンは、ListViewの真下にあり、flex3で列の幅をとる必要があります。

また、ListViewのスクロールを無効にして、SingleChildScrollViewを使用しようとしましたが、ListViewの下にある2つのボタンもスクロールを開始しますが、これは望ましくありません。画面上で静的にする必要があり、ListViewのみがスクロールする必要があります。

上記の問題の解決策が必要です。この拡張ウィジェットの回避策が必要です。これにより、ボタンをリストビューのすぐ下に配置できず、空白が表示されます。ExpandedウィジェットなしではListView.builderを使用できないと思うので、ListView.builderに代わるものがあれば共有してください。ListViewとExpandedウィジェットで可能なすべての構造を試しました。

class MyScreen extends StatefulWidget {
  @override
  _MyScreenState createState() => _MyScreenState();
}

class _MyScreenState extends State<MyScreen> {
  @override
  Widget build(BuildContext context) {
    return Column(
    children:[
      Expanded(
          child: Row(
          Expanded(flex: 2,
            child: Column(
                children: [
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                    FlatButton(),
                ]
            )
           ),
          Expanded(flex: 3, 
            child: Column(
                children: [
                    Expanded(selectedWidget),
                    Row(children: [FlatButton(), FlatButton()], )
                ]
            )
          ),
      )
      )
    ],);
  }
  
}

回答

yellowgray Nov 30 2020 at 17:01

たぶん、ListView内で使用Flexibleおよび設定できますshrinkWrap: true,。次の2つのボタンはExpandその後ウィジェットを必要としないかもしれません。

child: Column(
  children: [
    Flexible(
      child: ListView.builder(
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) => Text(index.toString()),
        itemCount: 6,
      ),
    ),
    Row(
      ... // 2 Buttons