Как добавить вертикальный разделитель между виджетом на столбце во флаттере? - PullRequest
Новая
       17

Как добавить вертикальный разделитель между виджетом на столбце во флаттере?

3 голосов
/ 08 апреля 2019

Добрый день.

У меня на этом сайте серфинг о том, как добавить вертикальный разделитель между виджетами в колонке во флаттере? но я ничего не получил.

вот что я хочу enter image description here

Я уже делаю горизонтальный разделитель. но когда я пытаюсь сделать вертикальный разделитель, разделяющий два объекта (текст | изображение), я ничего не получаю.

вот код: 

Row(children: <Widget>[
                Expanded(
                  child: new Container(
                      margin: const EdgeInsets.only(left: 10.0, right: 20.0),
                      child: Divider(
                        color: Colors.black,
                        height: 36,
                      )),
                ),
                Text("OR"),
                Expanded(
                  child: new Container(
                      margin: const EdgeInsets.only(left: 20.0, right: 10.0),
                      child: Divider(
                        color: Colors.black,
                        height: 36,
                      )),
                ),
              ]),

код выше для горизонтального 

Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
            VerticalDivider(
              color: Colors.red,
              width: 20,
            ),
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
          ],
        ),

код выше я делаю для вертикального делителя. но не удалось.

нужна твоя помощь. спасибо

Ответы [ 2 ]

7 голосов
/ 08 апреля 2019

Попробуйте заменить 

VerticalDivider(color: Colors.red, width: 20)

с 

Container(height: 80, child: VerticalDivider(color: Colors.red))
0 голосов
/ 08 апреля 2019

Ок, вот ответ.

это работает для меня. Спасибо мистеру @Android Team и мистеру @sunxs за вашу помощь:) 

Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
            Container(height: 80, child: VerticalDivider(color: Colors.red)),
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
            Container(height: 80, child: VerticalDivider(color: Colors.red)),
            Row(
              children: <Widget>[
                Image.asset('images/makanan.png', width: 30,),
                Text('Diskon 20%', style: TextStyle(fontSize: 5, color: Colors.green),)
              ],
            ),
          ],
        ),
...