Question

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

这是我的代码：

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

我在容器中装满了要显示颜色的内容。我想要黄色框顶部的向上箭头。

请帮助。

Answer 1

尝试这种方式。但是，无论您如何操作，箭头都会很小，使用起来也不方便。

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

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

在列表磁贴中垂直放置两个尾随图标

1 个答案: