Question

根据点击按钮实现按钮轮廓改变轮廓颜色后，一切正常。

当我在底部模态中使用这三个按钮时会出现问题。例如，我选择三个按钮之一，它应该具有适用于该特定按钮的轮廓颜色。当我解雇模态并重新打开时，我可以看到它适用。

有时我需要按住更长的按钮按下并移动一下可以看到效果。这是一个错误，或者我做错了。

为您的视图添加GIF。当选择按钮时，不立即更新需要关闭并打开以查看更改

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final String testImg = "https://thumblr.uniid.it/product/171331/a9d8d2f96f33.jpg";


  int _isSelected;


  List<String> listS = [
    "X",
    "S",
    "M",
  ];


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("My"),
      ),
      body: new Container(
        child: new Padding(
          padding: new EdgeInsets.all(8.0),
          child: new RaisedButton(
            onPressed: (){},
            child: new Center(
              child: new Text("TEST MODAL click button below"),
            ),
          ),
        ),
      ),
      bottomNavigationBar: new Container(
        padding: new EdgeInsets.all(4.0),
        child: new BottomAppBar(
          color: Colors.blue,
          child: new FlatButton.icon(
            onPressed: (){
                  _showBuy();
            },
            icon: new Icon(Icons.shopping_cart,
              color: Colors.white,
            ),
            label: new Text("ADD TO CART",
              style: new TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }

  void _showBuy(){
    showModalBottomSheet<void>(context: context, builder: (BuildContext contex){
      return new Scaffold(
        body:new ListView.builder(
            itemCount: listS.length,
              itemBuilder: (BuildContext context, int index){
                return new OutlineButton(
                  shape: new RoundedRectangleBorder(
                    borderRadius: new BorderRadius.circular(24.0),
                  ),
                    borderSide: new BorderSide(
                      width: 2.0,
                      color: ((_isSelected == index) ? Colors.green : Colors.grey),
                    ),
                    onPressed: (){
                    setState((){
                      _isSelected = index;
                      });
                    },
                  child: new Text(listS[index]),
                );
              },
          ),
      );
    });
  }


}

完整代码，对不起设计仅供测试。谢谢.GIF如下。

enter link description here

Answer 1

你可以想到方法setState做了两件事： 1）调用传递给它的函数 2）调用窗口小部件的build方法（一种非常简单的方式来考虑它）

然后你可以问问自己，调用build方法会导致传递给showModalBottomSheet的小部件被重新绘制吗？答案是否定的，因为在您的代码中，窗口小部件的构建来自方法_showBuy，必须通过按下按钮来触发。

解决方案是创建一个有状态窗口小部件并将其传递给showModalBottomSheet，并将状态管理移动到该窗口小部件。通过这样做，您将调用此新的有状态窗口小部件的setState而不是_MyHomePageState，这将按预期工作。（如果需要，您可以使用回调将状态传递回_MyHomePageState。

Answer 2

将模态包装在StatefulBuilder小部件中。将其包装在StatefulBuilder中将立即创建一个上下文和一个单独的stateSetter来手动触发重建并更新模式more information on StatefulBuilder here

颤振底部模态没有立即更新

2 个答案: