Как вертикально развернуть виджет контейнера во флаттере - PullRequest
Новая
       26

Как вертикально развернуть виджет контейнера во флаттере

0 голосов
/ 20 марта 2020

пытается расширить Expanded или Container по вертикали , чтобы соответствовать высоте с Row виджетом высоты , вот мой код 

    @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: ()=> onDepartClicked(),
      child: Container(
        padding: EdgeInsets.all(16),
        child: Card(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                flex: 8,
                child: Padding(
                  padding: EdgeInsets.all(16),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(department.name,
                        overflow: TextOverflow.visible,
                        style: TextStyle(fontSize: 20),
                      ),
                      Container(
                        margin: EdgeInsets.only(top: 8),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Image.asset("assets/images/feedback.png", width: 20, height: 20,),
                            SizedBox(width: 4,),
                            Text(department.phone),
                            SizedBox(width: 16,),
                            Image.asset("assets/images/feedback.png", width: 20, height: 20,),
                            SizedBox(width: 4,),
                            Text(department.type),
                          ],
                        ),
                      ),
                      Container(margin: EdgeInsets.symmetric(vertical: 8),child: Divider(height: 0.3, color: Colors.grey,)),
                      Container(
                        child: Text(department.description,
                          maxLines: 3,
                          style: TextStyle(fontSize: 13),
                        ),
                      )
                    ],
                  ),
                ),
              ),
              Container(
                width: 40,
                decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4))
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Image.asset("assets/images/feedback.png",
                      width: 20,
                      height: 20,
                      fit: BoxFit.scaleDown,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

Я хочу расширить этот блок в приведенном выше коде (второй дочерний элемент Row): 

Container(
            width: 40,
            decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4))
            ),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Image.asset("assets/images/feedback.png",
                  width: 20,
                  height: 20,
                  fit: BoxFit.scaleDown,
                ),
              ],
            ),
          ),

Я хочу добиться этого представления с синей областью, развернутой вертикально в родительском enter image description here

Ответы [ 2 ]

0 голосов
/ 20 марта 2020

Редактировать после уточнения вопроса:

Идея кода, приведенного ниже, похожа на Это изображение .

Оставленный потомок строка содержит столбец, столбец имеет 3 дочерних элемента.

Первый дочерний элемент столбца - это заголовок, второй - строка телефона и тип, а последний - описание.

Для "телефона" и "типа" вы можете использовать ListTile, но вы должны поместить их в что-то вроде Flexible или определить для них размер.

Я определил Listview и положил в него 10 карт .

Вот код: 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
          padding: EdgeInsets.all(16.0),
          itemBuilder: (BuildContext context, int index) {
            return _card();
          },
          shrinkWrap: true,
          itemCount: 10,
        ),
      ),
    );
  }

  Widget _card() {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Flexible(
              fit: FlexFit.tight,
              flex: 5,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    'UBIT',
                    overflow: TextOverflow.visible,
                    style: TextStyle(fontSize: 20),
                  ),
                  Row(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Icon(Icons.message),
                      SizedBox(width: 4),
                      Text('+09210000000'),
                      SizedBox(width: 16),
                      Icon(Icons.message),
                      SizedBox(width: 4),
                      Text('Science'),
                    ],
                  ),
                  Divider(),
                  Text(
                    'Lorem Ipsum ist ein einfacher Demo-Text für ' +
                        'die Print- und Schriftindustrie. Lorem Ipsum ' +
                        'ist in der Industrie bereits der Standard Demo-Text' +
                        ' seit 1500',
                    textAlign: TextAlign.justify,
                  ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.only(left: 8.0),
              child: Icon(
                Icons.message,
                size: 30.0,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
0 голосов
/ 20 марта 2020

Оберните контейнер в SizedBox с высотой: double.infinity, чтобы он занимал все доступное пространство, в вашем случае высоту строки. 

Expanded(
            child: SizedBox(
               height:double.infinity,
               child:Container(
                  decoration: BoxDecoration(
                     color: Colors.blue,
                     borderRadius: BorderRadius.only(topRight: Radius.circular(4), bottomRight: Radius.circular(4))
                     ),
                  child: Image.asset("assets/images/feedback.png", width: 20, height: 20, fit: BoxFit.scaleDown,),
                  ),
              ),
          )
...