沒有改變容器的顏色

我想在Container按下它時更改它的顏色并轉到新螢屏，但是當我回來時顏色肯定已經改變。

 class FreelancerLayout extends StatefulWidget {
  const FreelancerLayout({Key? key}) : super(key: key);

  @override
  State<FreelancerLayout> createState() => _FreelancerLayoutState();
}

class _FreelancerLayoutState extends State<FreelancerLayout>
    with AutomaticKeepAliveClientMixin<FreelancerLayout> {
 
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return SingleChildScrollView(
      physics: const BouncingScrollPhysics(),
      child: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15.0),
            child: GridView.builder(
              itemCount: catList.length,
              shrinkWrap: true,
              primary: false,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 8.0,
                  mainAxisSpacing: 10.0),
              itemBuilder: (context, index) => Center(
                child: GridCategory(
                    category: catList[index],
                    press: () {
                     
                      pushNewScreen(context,
                          screen: CategoryPage(category: catList[index]));
                    }),
              ),
            ),
          ),

GridCategory.dart

class GridCategory extends StatefulWidget {
  final Category category;
  final VoidCallback? press;

  const GridCategory({
    Key? key,
    required this.category,
    this.press,
    // required this.selectedIcon,
    // required this.unSelectedIcon,
  }) : super(key: key);

  @override
  State<GridCategory> createState() => _GridCategoryState();
}

class _GridCategoryState extends State<GridCategory> {
  final bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: widget.press,
      child: Container(
        width: 110,
        decoration: BoxDecoration(
            color: isSelected ? AppColors.fIconsAndTextColor : Colors.white,
            borderRadius: BorderRadius.circular(30.0)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(child: Image.asset(widget.category.catImage!)),
            Text(
              widget.category.iconName!,
              textAlign: TextAlign.center,
              style: TextStyle(color: isSelected ? Colors.white : Colors.black),
            ),
            const SizedBox(height: 10)
          ],
        ),
      ),
    );
  }
}

uj5u.com熱心網友回復：

將小部件更改GridCategory為有狀態小部件。然后您可以更新onTap函式以更改布林值，然后呼叫回呼。

onTap: (){
  setState((){
    isSelected = true;
  });
  press();
},

uj5u.com熱心網友回復：

在您的GridCategory小部件上，isSelected從父級傳遞。

class GridCategory extends StatelessWidget {
  final Category category;
  final VoidCallback? press;
  final bool isSelected;

  const GridCategory({
    Key? key,
    required this.isSelected,
    required this.category,
    this.press,
  }) : super(key: key);
  ......

要跟蹤選定的索引，您需要一個串列，我在List<int>這里使用，

class _FreelancerLayoutState extends State<FreelancerLayout>
    with AutomaticKeepAliveClientMixin<FreelancerLayout> {
  List<int> selectedIndex = [];

....

itemBuilder: (context, index) => Center(
  child: GridCategory(
      isSelected: selectedIndex.contains(index),
      press: () {
        if (selectedIndex.contains(index)) {
          selectedIndex.remove(
              index); // remove selected index if already exist
        } else {
          selectedIndex.add(index);
        }
//... perform others
}),

uj5u.com熱心網友回復：

首先，我在這里看不到任何改變的方法，isSelected所以它總是值false。其次，isSelected是final讓它值不能改變，洗掉final. 第三，因為isSelected是本地道具，它的變化不會出現在其他頁面，selected如果你想要它需要從父級傳遞。

class _GridCategoryState extends State<GridCategory> {
  // final bool isSelected = false;
  bool isSelected = false;
  
  @override
  Widget build(BuildContext context) {
    return InkWell(
      // onTap: widget.press,
      onTap: () {
        setState(() => isSelected = true);
        widget.press();
      },
      child: Container(/*Your code*/),
    )
  }
}

標籤：扑 镖

上一篇：setState()的問題，它在函式中不起作用

下一篇：使用2ListView.builder時無法正確滾動