web-dev-qa-db-ja.com

Flutter Dividerウィジェットが表示されない

現在、Flutter SDKとAndroid Studioを使用してアプリを構築する方法を学習しています。私の問題は、「管理」テキストと残りのカードの間にDividerウィジェットを追加する必要があることですが、下のスクリーンショットを見るとわかるように、仕切りは表示されていません。サイズを変更しようとしました（この場合、2つのテキスト間のスペースがちょうど増加します）。私の電話ではデフォルトで透明になっています。

カードウィジェットの状態のコードは次のとおりです。

class BBSCardState extends State<BBSCard>{
  @override
  Widget build(BuildContext context) {
    return new Padding(
      padding: const EdgeInsets.only(top: 16.0, bottom: 16.0, left: 12.0, right: 12.0),
      child: new Card(
        child: new Row(
          children: <Widget>[
            new Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                new Padding(
                  padding: const EdgeInsets.only(top: 22.0, bottom: 8.0),
                  child: new Text("Administrative", style: new TextStyle(color: new Color.fromARGB(255, 117, 117, 117), fontSize: 32.0, fontWeight: FontWeight.bold)),
                ),
                new Divider(),
                new Text("text")
              ],
            ),
          ],
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
        )
      )
    );
  }
}

そして、これはカードがどのように見えるかのスクリーンショットです：

The divider does not appear between the two texts

Also：Dividerからの実際の行のサイズを増やす方法はありますか？ （間隔だけでなく）

ありがとう！

flutter
7
Epicality

Rowを削除すると、Columnは使用可能なすべてのスペースを取り、Dividerは幅を持ちます。

@override
Widget build(BuildContext context) {
  return new Padding(
    padding: const EdgeInsets.only(
        top: 16.0, bottom: 16.0, left: 12.0, right: 12.0),
    child: new Card(
      child: new Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          new Padding(
            padding: const EdgeInsets.only(top: 22.0, bottom: 8.0),
            child: new Text("Administrative",
                style: new TextStyle(
                    color: new Color.fromARGB(255, 117, 117, 117),
                    fontSize: 32.0,
                    fontWeight: FontWeight.bold)),
          ),
          new Divider(
            color: Colors.red,
          ),
          new Text("text")
        ],
      ),
    ),
  );
}

Result

カスタムの仕切りを作成するには、Dividerの実装を確認して調整できます。例えば。 Dividerを置き換えます

new SizedBox(
  height: 10.0,
  child: new Center(
    child: new Container(
      margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
      height: 5.0,
      color: Colors.red,
    ),
  ),
)

CustomDivider

14
German Saprykin
Container(
           decoration: BoxDecoration(
             border: Border(
               bottom: BorderSide(color: Colors.lightGreen,width: 3.0),
             ),
           ),
         )

仕切りを使用する代わりに、カスタマイズされたコンテナを使用できます...

2
dolar singh

ウィジェットビューに線を引きたい場合は、下の例のようにBoxDecorationを使用してみてください。

child: new Container(
  decoration: new BoxDecoration(
   border: Border(
    top: BorderSide(width: 1.0, color: Colors.grey),
    left: BorderSide(width: 1.0, color: Colors.grey),
    right: BorderSide(width: 1.0, color: Colors.grey),
    bottom: BorderSide(width: 1.0, color: Colors.grey),),
 );

 child: new Row( 
         ....
 ),
)
0
Trendy