如何限制颤动中的项目位置？

Question

我尝试制作一个小部件列表。它看起来像这样：

我知道 flutter 中没有 Constraint Layout 这样的东西。但是我需要一些东西来将我的箭头图标定位在右侧的固定位置。简单来说，这是我的小部件代码：

Row(
children:[
  SizedBox(),
  Column(),//this is all the item on the left
  Spacer(),
  Expanded(// this is the heart and arrow button
   child: Column()
  )
]
)

我注意到如果左边的栏太宽，我的箭头和心形图标就会错位。

如何将我的图标固定在右边的位置？

Answer 1

在这里试试这个，你必须用扩展包住中间列，这样它将占用最大 space 个可用

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (_, index) => Container(
        padding: EdgeInsets.all(15),
        margin: EdgeInsets.symmetric(vertical: 5),
        decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),border: Border.all(width: 1.5)),
        child: Row(
          children: [
            Container(
              width: 25,
              height: 40,
              color: Colors.black,
            ),
            Expanded(
              child: Column(children: [
              //put your children here
              ]),
            ),
            //this will be always on right
            Column(
              children: [
                Icon(Icons.heart_broken),
                Icon(Icons.chevron_right),
              ],
            )
          ],
        ),
      ),
    );
  }
}

如何限制颤动中的项目位置？

How to constraint item position in flutter?

user-interface

row

widget

flutter