Вертикальное размещение двух конечных значков в плитке списка - PullRequest
Новая
       90

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

0 голосов
/ 02 августа 2020

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

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

Это мой код: 

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: () {})
                    ),
                  ],
                ),
              ),
            ),
          )
        ]),
      ),
    );
  }
}

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

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

1 Ответ

1 голос
/ 02 августа 2020

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

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

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,
                    )),
                  ],
                ),
...