颤振设置行的宽度

Question

我希望我的行宽固定为某个给定值。 但是 Row 正在占用全宽。

我想要如下；

但它的全宽如下：

我尝试过的：

Card(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.height),
      SizedBox(
        width: 5,
      ),
      Text(
        'Sort',
        style: ReediusCustomTheme.lable1
            .copyWith(color: ReediusCustomTheme.lableColor1),
      ),
      SizedBox(
        width: 24,
      ),
      Text(
        '|',
        style: ReediusCustomTheme.lable1
            .copyWith(color: ReediusCustomTheme.lableColor1),
      ),
      SizedBox(
        width: 24,
      ),
      Icon(Icons.filter_alt_outlined),
      SizedBox(
        width: 5,
      ),
      Text(
        'Filter',
        style: ReediusCustomTheme.lable1
            .copyWith(color: ReediusCustomTheme.lableColor1),
      ),
    ],
  ),
),

Answer 1

这取决于您的卡片在里面 - 例如，只需您的代码将卡片包装在例如中心或容器中即可满足您的需求。

考虑 ”…

• 小部件不知道也不决定自己在屏幕中的位置，因为决定小部件位置的是小部件的父级。

  由于父级的大小和位置反过来也取决于它自己的父级，因此如果不考虑整个树，就不可能精确地定义任何小部件的大小和位置。

  如果孩子想要与其父母不同的尺寸，而父母没有足够的信息来对齐它，那么孩子的尺寸可能会被忽略。

在定义对齐时要具体。

" 来自https://docs.flutter.dev/development/ui/layout/constraints

例如：

ListView(
  children: [
    Center(
      child: Card(
        child: Row(....

Answer 2

我想建议一个这样的结构，使用 Spacer() 将在两侧占用等量的可用空间，使用const将优化并防止它在每次状态更改时重建。

Card(
    child : Row(
        children : [
            const Spacer(),
            YourCustomRow(),
            const Spacer(),
        ],  
    ),
)

Answer 3

尝试将卡片放入 Column 小部件中。

Column(
 crossAxisAlignment: CrossAxisAlignment.start,
 children: [
   //Put your card here
])

Answer 4

试试下面的代码

 Container(
        height: 70,
        width: 250,
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(
              40,
            ),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.height),
              Icon(Icons.sort),
              SizedBox(
                width: 5,
              ),
              Text(
                'Sort',
              ),
              SizedBox(
                width: 24,
              ),
              Container(
                height: 30,
                color: Colors.black,
                width: 1,
              ),
              SizedBox(
                width: 24,
              ),
              Icon(Icons.filter_alt_outlined),
              SizedBox(
                width: 5,
              ),
              Text(
                'Filter',
              ),
            ],
          ),
        ),
      ),

结果->

Answer 5

您的代码工作正常。 可能您的父小部件不适合您的情况。

如果你在 ListView 小部件中使用它并且你有一个列表来显示它，你可以试试这个：

Stack(
    children: [
      Padding(
        padding: const EdgeInsets.only(top: 38.0),
        child: ListView.builder(
            itemCount: 5,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                  leading: const Icon(Icons.list),
                  title: Text("List item $index"));
            }),
      ),
      Align(
        alignment: Alignment.topCenter,
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(24.0),
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: const [
                Icon(Icons.height),
                SizedBox(
                  width: 5,
                ),
                Text(
                  'Sort',
                ),
                SizedBox(
                  width: 24,
                ),
                SizedBox(
                  height: 22,
                  child: VerticalDivider(
                    thickness: 1,
                    width: 2,
                    color: Colors.black,
                  ),
                ),
                SizedBox(
                  width: 24,
                ),
                Icon(Icons.filter_alt_outlined),
                SizedBox(
                  width: 5,
                ),
                Text(
                  'Filter',
                ),
              ],
            ),
          ),
        ),
      ),
    ],
  ),

Answer 6

用 Container 包裹你的行并为该 Container 提供宽度

 Container(
                              width: 250,
                              child: Card(
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    Icon(Icons.height),
                                    SizedBox(
                                      width: 5,
                                    ),
                                    Text(
                                      'Sort',
                                      style: ReediusCustomTheme.lable1
                                          .copyWith(color: ReediusCustomTheme.lableColor1),
                                    ),
                                    SizedBox(
                                      width: 24,
                                    ),
                                    Text(
                                      '|',
                                      style: ReediusCustomTheme.lable1
                                          .copyWith(color: ReediusCustomTheme.lableColor1),
                                    ),
                                    SizedBox(
                                      width: 24,
                                    ),
                                    Icon(Icons.filter_alt_outlined),
                                    SizedBox(
                                      width: 5,
                                    ),
                                    Text(
                                      'Filter',
                                      style: ReediusCustomTheme.lable1
                                          .copyWith(color: ReediusCustomTheme.lableColor1),
                                    ),
                                  ],
                                ),
                              ),
                            ),