web-dev-qa-db-ja.com

Flutter-ListViewでスクロールするとコンテナBoxShadowが消える

これは私のコンテナの外観です：

new Container(
        width: 500.0,
        height: 250.0,
        padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
        decoration: new BoxDecoration(
          color: const Color(0xFF66BB6A),
          boxShadow: [new BoxShadow(
            color: Colors.black,
            blurRadius: 20.0,
          ),]
        ),
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Container(
              padding: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 10.0),
              child: new Text("Testtext", style: new TextStyle(fontSize: 30.0, fontFamily: "Barrio", color: new Color.fromARGB(255, 230, 230, 230))),
            ),
          ]
        ),
      ),

他のいくつかのコンテナと共にListView内にあります。 ListViewのスクロールを開始するとすぐに、影が消えます。ビューをロードすると、正しく表示されます。

この問題について何か考えはありますか？

ありがとう

listviewdartdropshadowflutter
7
OhMad

私は問題を再現しようとしていましたが、コンテナにマージンを入れていないことに気付きました。ほとんどの場合、ListViewの他のアイテムは、Containerの境界の外側に描画されているため、手動で描画された影を覆っています。

コンテナの代わりに Card を使用することをお勧めします。 elevationコンストラクター引数を使用して、自然に見えるマテリアルシャドウを取得できます。カードにはマージンが組み込まれています。必要に応じて、Containerで囲むことで追加できます。これにより、影を表示するのに十分なスペースが確保されます。 Cardコンストラクター引数を使用して、colorの色を制御できます。

Cardの角はわずかに丸くなっています。角を丸くしたくない場合は、Material Designの仕様から外しますが、 Material をtypeで囲むこともできます。 MaterialType.canvasContainer内。

11
Collin Jackson

この他の答えは、コンテナを継続する必要がある人向けです。

Container(
          decoration: BoxDecoration(
          shape: BoxShape.circle, // BoxShape.circle or BoxShape.retangle
          //color: const Color(0xFF66BB6A),
          boxShadow: [BoxShadow(
            color: Colors.grey,
            blurRadius: 5.0,
          ),]
        ),
          child: ...
),
7
Edeson Bizerril