Вертикальное размещение двух завершающих значков в плитке списка

Я разместил два значка со стрелками вертикально в столбце плитки списка, используя опцию замыкания. Но я не могу получить желаемый рендеринг. Я использовал гибкий виджет для их настройки, но верхний значок не перемещается вверх.

Макет, который я получаю

Это мой код:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: ListView(children: <Widget>[
          new Container(
            color: Colors.lightBlue,
            child: ListTile(
              title: Text("This is a title"),
              subtitle: new Text("This is subtitle"),
              trailing: new Container(
                color: Colors.yellow,
                child: Column(
                  children: <Widget>[
                    new Flexible(
                        flex: 6,
                        child: new IconButton(
                            icon: Icon(Icons.arrow_drop_up), onPressed: () {})
                    ),
                    new Flexible(
                        flex: 4,
                        child: new Text("1")
                    ),
                    new Flexible(
                        flex: 5,
                        child: new IconButton(
                            icon: Icon(Icons.arrow_drop_down),
                            onPressed: () {})
                    ),
                  ],
                ),
              ),
            ),
          )
        ]),
      ),
    );
  }
}

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

Пожалуйста помоги.


flutter flutter-layout flutter-listview
person Shivam Shukla    schedule 02.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуйте так. Но как бы вы это ни делали, стрелки будут очень маленькими и неудобными в использовании.

Попробуйте создать свой виджет с другим дизайном, чтобы сделать его более удобным для пользователя. Может быть, что-то вроде этого. введите здесь описание изображения

ListView(children: <Widget>[
      new Container(
        color: Colors.lightBlue,
        child: ListTile(
          title: Text("This is a title"),
          subtitle: new Text("This is subtitle"),
          trailing: new Container(
              width: 150,
              child: Row(
                children: <Widget>[
                  Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(5.0),
                          topLeft: Radius.circular(5.0)),
                      color: Colors.black.withOpacity(0.7),
                    ),
                    child: Center(
                      child: Icon(Icons.remove,color: Colors.white),
                    ),
                    width: 50,
                  ),
                  Container(
                    width: 50,
                    color: Colors.white,
                    child: Center(
                      child: Text('0'),
                    ),
                  ),
                  Container(
                    width: 50,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(5.0),
                          topRight: Radius.circular(5.0)),
                      color: Colors.black.withOpacity(0.7),
                    ),
                    child: Center(
                      child: Icon(Icons.add, color: Colors.white,),
                    ),
                  )
                ],
              )),
        ),
      )
    ]),

Ваш код.

Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Container(
                        child: Icon(
                      Icons.arrow_drop_up,
                      size: 21,
                    )),
                    Text(
                      "1",
                      style: TextStyle(fontSize: 12),
                    ),
                    Container(
                        child: Icon(
                      Icons.arrow_drop_down,
                      size: 21,
                    )),
                  ],
                ),
person Filip    schedule 02.08.2020