顫振設置行的寬度

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