如何在Flutter中限制小部件的位置？

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

我注意到如果左侧的列变得太宽，我的箭头和心形图标会偏离线条。 如何将我的图标固定在右侧位置？

- Flitzcore

---

使用Stack和Positioned小部件，以便您可以将箭头放置在确切的位置。或者也可以使用Expanded包装上面的列，并设置一个flex。 - princesanjivy

Answer 1

试试这个，你必须用 expanded 将中间列包装起来，这样它才能占用最大可用空间

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

- Ruchit