问在列表平铺中垂直放置两个拖尾图标
EN

Stack Overflow用户

提问于 2020-08-02 11:09:49

回答 1查看 1.4K关注 0票数 0

我已经使用尾随选项在列表瓦片的列中垂直放置了两个箭头图标。但我无法获得所需的渲染效果。我使用了灵活的小工具来调整它们，但是顶部的图标没有向上移动。

The layout I am getting

这是我的代码：

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

音视频低代码开发方案最快1天上线

推出 TUICallKit 和 TUIRoomKit 低代码集成方案，最快1天接入在线教育、语聊房、在线客服等应用

回答 1

Stack Overflow用户

发布于 2020-08-02 11:25:29

试试这个方法。但是不管你怎么做，箭头都会很小，使用起来很不方便。

尝试创建具有不同设计的您自己的小部件，以使其对用户更方便。也许是这样的。

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